transform:rotateを使って要素を回転

CSSだけで要素を回転させるにはtransform:rotate()を使う。

transitionと複合的に使うとhover時に3D的にクルクル回るカードの様なアイコンを作る事もできる。


sample

時計回りに回転

/*マイナス値を指定で反時計回り*/

X軸を起点に反転(上下に回転)


Y軸を起点に反転(左右に回転)


3Dに回転

3Dに回転

/*rotate3d(x,y,z,回転角度); / x,y,zは0〜1.0の間*/

この記事が気に入ったら
いいね ! お願いします(><;)

投稿者:和禅雅

この記事へのコメント