どうも！LSSです！！
CSSの3D表現とkeyframesによるアニメーション。
組み合わせると色々面白い動きを作る事ができます^^
が、関連するプロパティが多く、またそれぞれを「どうすれば どうなるか」が分かりにくいところもあり、これから学ぼう、あるいは自分で考えた動きをさせてみようとされる方に「高いハードル」となっているのではないでしょうか。
そこで、微力ながら「手軽に設定変更でき、その設定がどう動きに反映されるのかを即時に見られるツール」を作成してみました。
CSS3Dアニメーションお試しツール
黄色枠内の項目を変更できます。
@keyframes kaitena{
0%{transform:rotate(0deg);}
100%{transform:rotateX(deg);}
}
.waku{
width:208px;
height:156px;
position:relative;
transform-style:preserve-3d;
perspective:px;
}
.nakami{
position:relative;
transform-origin:%%;
animation:kaitenas infinite;
}
</style>
<div class="waku">
<div class="nakami"><img src="画像URL" 中略/></div>
</div>
作成されたコード
使い方
ぐるぐる回転している写真と、黄色い枠（ところどころ項目選択可能になっている）、その下にグレーの枠があります。
この黄色い枠の中の選択項目を変更すると、即座に「ぐるぐる回転している写真」の動きが変わります。
また、その都度、下のグレーの枠内の「作成されたコード」も変化し、それをコピペすると その時点での写真の動きを再現するコードとして使用する事ができます。
選択項目について
※直感で触って遊べるツールなので、ここは読まなくても遊べますが、詳しく知りたい方向け。
まず、「rotate」の後に、XかYかZか、を選択する事ができます。
こちらは、
transform:rotateX(〇deg);
だと「水平の軸を中心に〇度かたむかせる」
transform:rotateY(〇deg);
だと「垂直の軸を中心に〇度かたむかせる」
transform:rotateZ(〇deg);
だと「奥行きの軸を中心に〇度かたむかせる（結果、平面的な回転になります）」
という、回転の向きの選択となります。
（〇度かたむかせる、の部分は勝手にアニメーション変化しているので、ぐるぐる動いています。）
次に、アニメーションの定義中で「360か180か-360か」を選択できる項目があります。
アニメーション開始時の角度は0度としていますが、ここで設定するのは「アニメーション終了時の角度」で、例えば「360」だと360度＝一周するアニメーションに、「180」だと180度＝半回転するアニメーションに、「-360」だと逆方向に一周するアニメーションになります。
次に、perspectiveの値を設定する事ができます。
こちらは「100か300か600か」を選択でき、値が小さいと立体的な回転がダイナミックなものになります。
次に、transform-originの値を設定する事ができます。
こちらは値が２つあり、どちらも%で設定します。
回転の「軸位置」を選択する項目で、例えば１つめの選択を「0」にすると「左端」が軸となり、横回転する時に「左端を中心に」回転する事になります。（100にすると右端、50にすると中心が軸となります。）
２つめの項目は縦位置で、「0」にすると上端、「100」にすると下端、「50」にすると上下中央が軸となります。
次に、アニメーションの動き方の種類を選択できます。
「ease-in-out」や「ease」は「最初と最後はゆっくり」した動きになり、始まりは加速しながら、終わりは減速しながら、という動きになります。
「linear」は「速度変化しない、一定速度で」アニメーションが進行します。
次に、アニメ―ションの再生にかける時間を選択できます。
「5」だと一回の再生に5秒かける事となり、この数字が小さいと速く、大きいとゆっくりした動きになります。
最後に、アニメーション再生後に「逆再生するかしないか」を選択できます。
「infinite」の後ろが空白の時は逆再生しないで同じ動きが繰り替えされます。
「alternate」を選択すると、一回のアニメーションが終わった後に、逆再生で元に戻る動きが行われ、その後また通常のアニメーション…という繰り返しになります。
あとがき
「CSSの3Dアニメーション」に使えるプロパティは、今回の例の他にも色々ありますが、基本的なところ（？）をピックアップしてみました。
このブログを参考に、様々なCSSアニメーションに挑戦されている方がおられ、ブロガー冥利に尽きる今日この頃。
この記事が再確認や仕組みの確認のお役に立てば幸いです^^
また、他の方にとっても、色々触ってみていただき「CSSってこんな事ができるんだ！」と思っていただけると嬉しいです！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
