フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

「ふ」のtwitter。記事を更新するとつぶやきます。

コメント・お問い合わせはこちら。

CSSアニメーション、
transform:rotate（回転）について。

〽️記述と単位。 〽️rotateX/Y/Z。 〽️回転方向。 〽️応用サンプル。 〽️シンプルもアクロバットも。

• CSSアニメーション、作り方。
  

  2020.04.17
  webアニメーションを１から学ぼう♪

⬆︎CSSアニメーションについてのまとめページはこちら。

記述と単位。

transform:rotateの１番簡単な形としては、以下⬇︎のように記述します。

transform:「「１rotate(角度)」」;

（　）の中には回転角度を記述するのですが、単位は次のようなものがあります。

① deg
degree(度数法)です。普段馴染みのある90°、360°といった表現のことです。

② rad
radian（弧度法）と呼ばれる表記法です。円弧の長さで角度を表現します。１周は2πradianです。

③ grad
「grade」という珍しい表記法で、１周を400で割ったもので表現します。1グラードは0.9°に当たります。。

④ turn
１回転の「回転」の部分に同じです。1turnは360°。

４種類ありますが、①の度数法「deg」が馴染みあるぶん、よく使われます。
「ふ」は④の「turn」もよく使います。360°以上の回転がもとめられるとき、例えば「720°」と表現するよりも「2turn」としたほうが断然わかりやすいからです。

角度には負の値を指定することもできますが、正の値で正面から見て時計回りに回転します。

サンプルとして準備した画像です。ここにアニメーションプロパティとキーフレームを指定し、試してみましょう。

<img id = "sample" src = "sample.svg">

#sample { animation:sample 2s linear infinite; } @keyframes sample ｛ bbto { 「「１transform:rotate(90deg);」」 } bb｝

90°回転するアニメーションになりました。

今度は値に「turn」を使ってみましょう。キーフレーム、rotate( )の値だけ書き換えます。

to { transform:rotate(「「１-2turn」」); }

キーフレーム0〜100%間に２回転するCSSアニメーションができました。
「- 2turn」としているので反時計回りです。

rotateX/Y/Z。

transformのrotateには他にも種類があります。

先ほどのrotateですが、変形の基準（transform-origin）はデフォルトの「center」の状態でした。要素の水平方向をX、垂直方向をYとして回転の動きをイメージ化すると、⬆︎の画像のように考えることができます。

XY軸それぞれの方向にも着目しておいてください。
今後登場する他のtransform関数は、この方向をもとにして変形がおこなわれます。

さらにこれを3D空間で考えてみます。
3Dのイメージにすると、X/Y軸に加えて、前後の奥行きの指標となるZ軸が登場します。
これでみると、先のセクションで実装したアニメーションの回転軸はZ軸だったことがわかります。

同様にCSSのtransformには、X軸やY軸を回転軸とする関数も用意されています。
それがrotateX/Yです。

　■ rotateX。

要素をX軸に対して回転させます。

#sample { animation:sample 2s linear infinite; } @keyframes sample ｛ bbto { transform:「「１rotateX(1turn);」」 } bb｝

「X」は大文字表記である事に注意してください。

要素が水平軸に対して回転しました。

　■ rotateY。

今度はYを軸とする回転です。

bbto { transform:「「１rotateY(1turn);」」 }

要素が垂直軸に対して回転しました。


rotateX/Yについて試してきましたが、

　回転軸が水平→縦回転
　回転軸が垂直→横回転

と、回転軸と実際の回転は縦横が逆の関係となることに注意してください。

　■ rotateZ。

bbto { transform:「「１rotateZ(1turn);」」 }

rotateZという、改めて回転軸Zを明記する関数です。結果はただの「rotate」と同じになります。
複数の回転軸を扱う際には、コードの視認性が高まって整理がつきやすくなりますね。

回転方向。

transform:rotate(1turn);

はじめのセクションでただの「rotate」を指定したときは、正面から見て時計回りに回転していました。
回転軸を指定するrotateX/Y/Zでは、回転方向はどのようになっているのでしょうか？

transform:「「１rotateY」」(1turn);

これはY軸に対して回転させているのですが、正面から見た状態ではどちらに回っているのか判断できません。

判別するため、少しだけ3D効果を使います。
CSSのperspectiveというプロパティを使うと、子要素の遠近感がシミュレートされます。#sampleを<div> 〜 </div>で囲んで階層化し、親の<div>にperspectiveを施してみます。

「「１<div id = "soto"> 」」 <img id = "sample" src = "sample.svg"> 「「１</div>」」

#soto { 「「１perspective:500px;」」 }

遠近感を表現できたので、回転方向が観察できます。
これは・・

Y軸の向きは下方向なので、軸方向に対して反時計回りということです。
rotateXはどうでしょうか？

transform:「「１rotateX」」(1turn);

X軸の方向は左です。
ということはこれも、軸方向に対して反時計回りですね。

transform:「「１rotateZ」」(1turn);

rotareZでは、正面から見ると時計回り。
しかしZ軸は後ろから前に向いているので、軸方向に対しては半時計回り、ということに成増。


つまり、

全てのrotate関数は、座標軸方向に対して反時計回り。

なのですね。

応用サンプル。

transform:rotateの仕組みが理解できたところで、ここからはアニメーションの実例をいくつか紹介していきます。

　■ 90°で非表示。

rotateXやYを使って、要素を画面に対し垂直にしたとき。正面からは何も見えなく成増。
これを利用した、「何もないところから要素が表示されていく」というCSSアニメーションです。

#sample { animation:sample 3s 「「４ease-in」」 infinite; } @keyframes sample ｛ bbfrom { 「「１transform:rotateX(90deg);」」 } bb｝

animation-timing-functionを「ease-in」としてみました。

　■ originを左上に。

transform-originを要素の左上に指定し、横から差し出されるような動きにしています。

#sample { 「「１transform-origin:top left;」」 animation:sample 1.5s ease-out infinite; } @keyframes sample ｛ bbfrom { 「「４opacity:0;」」 「「１transfomr:rotate(-180deg);」」 } bb｝

　■ 「自転」だけじゃない。

transform-originを要素内のどこかに指定すると、要素は「自転」しますが、 要素の外側に基準を取ると、要素が「公転」する効果が得られます。

「「４<div class = "soto">」」 <img src = "sample.svg"> 「「４</div>」」

要素の外側に親要素を用意し、そこに先ほど使ったperspectiveを指定します。

.soto { 「「４prespective:1300px;」」 } #sample { width:40%; margin-right:-10%; 「「１transform-origin:-50%;」」 animation:sample 4s linear infinite; } @keyframes sample ｛ bbto { transform:rotateY(1turn); } bb｝

　■ ８の字回転。

transformに複数の関数を記述した場合、後ろに書いたものを前に書いたものが内包します。
このサンプルでは「Z軸回転しているものをX軸回転させる」という状態を作りました。

#sample { marigin-right:0; 「「４transform-origin:left;」」 animation:sample 2s linear infinite; } @keyframes sample ｛ bbto { transform:「「１rotateX(1turn) rotateZ(1turn)」」; } }

シンプルもアクロバットも。

今回はtransform関数の「rotate」について紹介してきました。最後までお読みくださり、ありがとうございます。
シンプルな回転アニメーションをさりげなくwebサイトに添えるのもよし。もしくはtransform-originや今後紹介していく他のtransform関数と組み合わせて、アクロバットなものを作るのもいいですね！
皆さんも遊んでみてください。ではまた〜 ♪