# 創建懸停（鼠標移動）時旋轉的動畫

設置一個基於鼠標位置的旋轉：

1. 設定視角
2. 設定觸發器
3. 製作旋轉的動畫
4. 配置靜止狀態
5. 創建一個鏡面高光

## 設定視角

1. 確保您要做動畫的子元素的父元素被選中
2. 在過渡和變換下的樣式面板中，將子元素的視角改為1000像素

## 設定觸發器

1. 選擇您想作為觸發器的元素（例如卡片）
2. 在互動面板中，點擊選定元素旁邊的加號，從下拉選單中選擇鼠標在元素上移動

## 製作旋轉的動畫

1. 點擊互動面板 > 鼠標移動時 > 動作 > 播放鼠標動畫
2. 點擊鼠標動畫旁邊的加號
3. 命名它（例如在鼠標移動時旋轉）
4. 點擊鼠標X動作時間線下的加號，在0%處選擇旋轉
5. 在旋轉下，將Y軸改為-5度
6. 點擊100%處的卡片元素，在旋轉下將其Y軸改為5度
7. 在鼠標Y動作下，添加一個旋轉的動作
8. 在"旋轉"的0%處，將X軸改為5度
9. 在100%的旋轉下，將X軸改為-5度
10. 關閉動畫以調整平滑度

## 配置靜止狀態

1. 在交互面板中的鼠標移動時，將鼠標的X位置設置為50%。
2. 將鼠標的Y位置設置為50%。

## 創建一個鏡面高光

1. 在畫布上拖動一個新的Div塊到您正在使用的元素裡面（Card）
2. 創建一個class，並命名它（例如卡片-高光）
3. 設定其寬度和高度（例如400像素）
4. 將位置設置為絕對值
5. 從左上角開始定位
6. 設定背景顏色
7. 在邊框下，將半徑改為50%
8. 在"效果"下，將"不透明度"改為10%
9. 添加一個模糊過濾器，將半徑改為50像素
10. 在互動面板上，點擊鼠標移動時的旋轉
11. 在鼠標X時間線的0%處添加一個移動動畫，將其X軸改為100%
12. 在鼠標X時間線的100%處，添加一個移動動畫，並將其X軸改為-50%
13. 在鼠標Y軸的時間線0%處，添加一個移動動畫，並將其Y軸改為50%
14. 在鼠標Y軸的時間線上，在100%處添加一個移動動畫，並將其Y軸改為-50%


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/docs-webflow/webflow-101/7-dong-hua/chuang-jian-xuan-ting-shu-biao-yi-dong-shi-xuan-zhuan-de-dong-hua.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.