本ページでは、アニメーション製作の基本となる「オブジェクトの回転」について説明します。
WebAnimator Plus の「オンラインマニュアル」をご覧いただいていない場合、以下の手順をお読みいただく前にぜひご一読ください。
回転の軸
オブジェクトは、以下の3種の軸に沿って（軸を中心に）回転させることができます。
- X軸：ステージ横方向
- Y軸：ステージ縦方向
- Z軸：奥行きの方向（CSSのz-indexの方向）
四角形を回転させる
では、実際に四角形を回転させるサンプルを作ってみましょう。
今回、以下のアニメーションを制作します。
0秒から2秒まで：四角形をZ軸に沿って0°から360°まで回転
2秒から4秒まで：四角形を無回転のまま表示
4秒から6秒まで：四角形をZ軸に沿って360°から0°まで回転
以下にこのアニメーションの制作手順を動画と文章で掲載しますのでご覧ください。
四角形オブジェクトを追加する
四角形オブジェクトをステージに追加します。
オブジェクトパレットから四角形アイコンをステージにドラッグ＆ドロップし、ステージ中央に配置します。
プロパティの追加
四角形をZ軸にそって回転させるためのプロパティ「回転 Z軸」をタイムラインに追加します。
タイムラインの「四角形 #1」右側の「プロパティを追加」アイコンをクリックします。
表示されたプロパティ一覧で「表示」欄の「回転 Z軸」にチェックを入れます。
「回転 Z軸」にチェックを入れると、タイムラインに「回転 Z軸」の行が表示されます。
0秒から2秒まで：四角形をZ軸に沿って0°から360°まで回転
タイムラインのカーソルを 0s（0秒）の位置に移動させ、「回転 Z軸」行にキーフレームを追加します。
タイムラインのカーソルが 0s（0s）の位置にある状態で、「回転 Z軸」行の「+」アイコンをクリックしてください。
「回転 Z軸」行の 0s（0秒）の位置にキーフレーム（ひし形のマーク）が追加されます。
タイムラインのカーソルを 2s（2秒）の位置に移動させ、「回転 Z軸」行の「+」アイコンをクリックします。
「回転 Z軸」行の 2s（2秒）の位置にキーフレーム（ひし形のマーク）が追加されます。
タイムラインのカーソルが 2s（2秒）の位置にある状態で、ステージ上の四角形をクリックし、「プロパティ」パレットの「要素」タブを選択します。
「回転」>「Z」欄に「360」を入力します。
タイムラインのキーフレーム間（0sと2sの間）が緑色になり、アニメーションが設定されます。
上記の操作によって、0s（0秒）から 2s（2秒）の間で、四角形がZ軸に沿って0°から360°まで回転するようなアニメーションとなりました。
タイムライン上の再生ボタンを押すと動作を確認することができます。
2秒から4秒まで：四角形を無回転のまま表示
今回、2s（2秒）から 4s（4秒）までの間は四角形を回転させずそのまま表示させた状態にします。
タイムラインのカーソルを 4s（4秒）の位置に移動させ、「回転 Z軸」行にキーフレームを追加します。
タイムラインのカーソルが 4s（4s）の位置にある状態で、「回転 Z軸」行の「+」アイコンをクリックしてください。
「回転 Z軸」行の 4s（4秒）の位置にキーフレーム（ひし形のマーク）が追加されます。
4秒から6秒まで：四角形をZ軸に沿って360°から0°まで回転
タイムラインのカーソルを 6s（6秒）の位置に移動させ、「回転 Z軸」行にキーフレームを追加します。
タイムラインのカーソルが 6s（6s）の位置にある状態で、「回転 Z軸」行の「+」アイコンをクリックしてください。
6s（6秒）の位置にキーフレームが追加されます。
タイムラインのカーソルが 6s（6秒）の位置にある状態で、ステージ上の四角形をクリックし、「プロパティ」パレットの「要素」タブを選択します。
「回転」>「Z」欄に「0」を入力します。
上記の操作によって、4s（4秒）から 6s（6秒）の間で、四角形がZ軸に沿って360°から0°まで回転するようなアニメーションとなりました。
以上で手順は完了です。タイムラインのカーソルを先頭に戻し、再生ボタンをクリックすると、四角形がZ軸に沿って 0°から360°まで回転 → 360°から0°まで回転します。