ホバー（マウスオーバー）時に回転するアニメーション効果を生成します

カーソルの位置に基づいて回転メカニズムを確立します。 

このチュートリアル全体を通して: 

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ブロック 対応する要素（カード）内のキャンバスに
2. 作成する クラス 名前を割り当てます（カードハイライトなど）
3. サイズ（例：400ピクセル）と位置を絶対値に設定します。
4. 左上隅から配置します
5. 適切なものを選択してください 背景色 （例：白）
6. 変更する 半径 下 国境 50%へ
7. 調整する 不透明度 10%以下 効果
8. 適用する ぼかし フィルターして変更する 半径 50ピクセルまで
9. の中に インタラクションパネル、 選ぶ ホバー回転
10. の中に マウスXのタイムライン 0%には、 動く アニメーションを作成し、X軸を100%に設定する
11. の中に マウスXのタイムライン 100%では、 動く x軸を-50%に設定したアニメーション
12. のために マウスYタイムライン 0%で、 動く アニメーションのY軸を50%に調整する
13. 100%で マウスYタイムライン、適用する 動く アニメーションのY軸を-50%に変更します

プレビュー モードで進捗状況を確認します。