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

css

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

transformについて調べてみた。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考サイト

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

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