CSS3のtransformで回転・拡大縮小・移動をアニメーションさせてみた

css

前回はtransitionによるアニメーションをメモったがそれを利用してアイコンとかを回転させるアニメーションをどうするのか調べてみた。そしたらどうやらtransformというプロパティを利用する。

transformについて調べてみた。

transformには変形させる関数もあるのだが、変形させるための軸を指定するtransform-originがある。

変形の基準点となるtransform-origin

引数にはx軸とy軸の値を指定できる。指定できる値はパーセンテージかキーワードです。
なにも指定なければ初期値は要素の中心です。

/* パーセンテージ */
transform-origin:50% 50%;

/* キーワード */
transform-origin:center center;

transformプロパティと関数について

transformで変形させるには下記の関数を利用して変形させる。

rotate(deg)で要素を回転させる

指定できる値は「回転数deg」といった感じ。

/* 180度回転させる */
 transform:rotate(180deg);

skew(deg)で要素を歪ませる

指定できる値は「歪ませる数値deg」といった感じ。

/* x軸の方向へ50deg歪ませる */
 transform:rotate(50deg);
 
 * x軸の方向へ50deg y軸の方向へ100deg*/
 transform:rotate(50deg,100deg);

scale(xy[x,y])で拡大・縮小させる

指定できる値は「1」「0.5」「2」といった感じ。*「2」は2倍の大きさ

/* 半分の大きさにする */
 transform:scale(0.5,0.5);

translate(x,y)で要素を移動させる

指定できる値は「移動値px」といった感じ。

/* x軸の方向へ100px y軸の方向へ200pxへ移動させる */
 transform:translate(100px,200px);

変形させる要素を複数指定する場合

一度に複数指定したい場合は半角スペースで区切って指定する。

/* x軸の方向へ100px y軸の方向へ200pxへ移動させて拡大させる */
 transform:translate(100px,200px) scale(2,2);

transitionと組み合わせてアニメーションさせる

特にアニメーションさせなくて最初から回転させておきたい場合は、特にhoverの設定はいらなくてその要素自体に設定すればいい。


/* 画像を45度回転させる */

img{
transform:rorate(45deg);
}

transitionとtransformを組み合わせてアニメーションさせてみる。transitionで指定するプロパティの部分がtransformになる。


/* 画像をロールオーバーしたら1回転する */

img{
transition:transform 0.5s ease-out;
}

img:hover{
  transform:rorate(360deg);
}

参考サイト

いくつかのデモを作ってみました。

css3 のtransformで回転・拡大縮小・変形・移動をやってみた。 – jsdo.it – share JavaScript, HTML5 and CSS