CSS3のtransformを使ったアニメーション(基本編)
CSS3では、cSS2までにはなかったプロパティがたくさん用意されていますが、
今回は、その中のtransformの使い方を調べてみました。
↓こちらが今回transformを使ってみたものです。
マウスを写真にのせると、transformの効果が現れます。
transformだけだとどう変化したのかわかりにくいものもあるので、
transitionを使ってアニメーションさせています。
transformはtransform関数という関数を指定して使います。
|
1 2 3 | 要素{ transform: [transform関数]; } |
実際には、現時点で-webkit-や-moz-などのベンダープレフィックスをtransformの前につける必要があります。
では使ってみたものを、それぞれ見ていきます。
回転(rotate)
HTML
|
1 | <figure id="rotate"><p>rotateX</p><img src="images/usa.jpg" width="320" height="171" alt="ウサギ"></figure> |
CSS3
|
1 2 3 | #rotate img:hover{ transform: rotateX(360deg); } |
「transform: rotateX(角度);」で横方向に回転させることができます。
縦方向なら「rotateY」、こちらを正面に回転させるときは「rotateZ」を使います。
3Dの回転(rotate3d)
HTML
|
1 | <figure id="rotate3d"><p>rotate3d</p><img src="images/fuku.jpg" width="320" height="171" alt="ふくろう"></figure> |
CSS3
|
1 2 3 | #rotate3d img:hover{ transform: rotate3d(0.1,0.75,0.25,180deg); } |
「transform: rotate3d(X方向の数値, Y方向の数値, Z方向の数値, 角度);」で3Dの回転が行えます。
角度の前の数値は、方向ベクトルを決めるためのものです。
X方向の数値が1で、その他の数値が0だと、rotateXと同じになります。
自由に操作するためには、3Dに関する知識が必要になりそうです。
傾斜(skew)
HTML
|
1 | <figure id="skew"><p>skew</p><img src="images/fuku.jpg" width="320" height="171" alt="ウサギ"></figure> |
CSS3
|
1 2 3 | #skew img:hover{ transform: skew(10deg,20deg); } |
「skew(X軸の傾斜角度, Y軸の傾斜角度);」で斜めに歪めることができます。
移動(translate)
HTML
|
1 | <figure id="translate"><p>translate</p><img src="images/usa.jpg" width="320" height="171" alt="ふくろう"></figure> |
CSS3
|
1 2 3 | #translate img:hover{ transform: translate(50px, 50px); } |
「translate(X方向の移動量, Y方向の移動量);」で移動させることができます。
拡大・縮小(scale)
HTML
|
1 | <figure id="scale"><p>scale</p><img src="images/usa.jpg" width="320" height="171" alt="ふくろう"></figure> |
CSS3
|
1 2 3 | #scale img:hover{ transform: scale3d(1.5, 1.5, 1.5); } |
「scale3d(X軸方向の倍率, Y軸方向の倍率, Z軸方向の倍率);」で拡大縮小できます。
これらを合わせて使うときは、transform関数の間をスペースで区切って複数指定できます。
HTML
|
1 | <figure id="transscale"><p>translate + scale + rotateY</p><img src="images/fuku.jpg" width="320" height="171" alt="ふくろう"></figure> |
CSS3
|
1 2 3 | #transscale img:hover{ transform: scale3d(1.5, 1.5, 1.5) translate(50px, 50px) rotateY(360deg); } |
現在は対応しているブラウザが限られていますが、
JavaScriptと比べても簡単に効果を出すことができるので、
対応ブラウザの普及が待たれます。
Author Profile
SHARE
