【CSS】 transformプロパティ：2D回転

transformプロパティ、これを使って要素を移動、回転、スケーリング、傾斜させることができます。スペースで区切って複数指定することができます。

transformプロパティは2次元と3次元の二つの異なる設定があります。これらはそれぞれの独自の個々のプロパティと値が付いています。

transformプロパティに対するブラウザのサポートまだ完ぺきではないが、ベンダープレフィックス(-webkit-、-moz-、-o-など)である程度カバーできるようになります。

Transform 構文

transformプロパティを含め、値は括弧内に特定の数値などを入力することでスタイルを指定できます。

ベンダープレフィックス(vendor prefixes)

div {
 　-webkit-transform: rotateY(45deg);
 　-moz-transform: rotateY(45deg);
 　-o-transform: rotateY(45deg);
 　transform: rotateY(45deg);
 　}

徐々にブラウザのサポート環境が改善されつつあるので、時間が経つにつれて、ベンダープレフィックスが要らなくなる時期が来るだろうが、当分はこれらをページ内で並行するのがいいかもしれません。

2D / 3D Transform

要素は2次元と3次元の両方でtransformが機能します。

2次元のtransformは水平および垂直軸であるX軸とY軸上で動作します。3次元はX軸とY軸、さらに深さ(奥行き)を表すZ軸を加えて定義します。

transformプロパティ
rotate(deg)	要素を回転させる。rotate()、rotateX()、rotateY()、rotateZ()、rotate3d()値の指定は、()に回転角度の数値を入力する。
scale(数値)	要素を拡大・縮小させる。scale()、scaleX()、scaleY()、scaleZ()、scale3d()値の指定は、()に数値を入力する。
skew(deg)	要素を傾斜変形させる。skew()、skewX()、skewY()値の指定は、()に傾斜角度の数値を入力する。
translate(距離)	要素の位置を移動させる。translate()、translateX()、translateY()、translateZ()、translate3d()値の指定は、()に距離の数値を入力する。

2D Rotate(2次元回転)

Rotate値は0度から360度まで要素を回転させます。正の値(+)は要素を時計回りに回転させる、負の値(-)は反時計回りの回転をします。回転の初期値は要素の中央である50% 50%(水平と垂直の両方)です。

rotate角度の単位はdegで回転する角度を指定できます。

transform: rotate(Ndeg)：(反)時計周りに回転させる

まず2つのボックスを指定します。１つは元のボックス(グレー色)、もう1つは回転に使うボックス(白の円形)を下記のようにそれぞれ指定します。

CSS：ボックス指定

.backbox {
　　　background-color:#666; 
　　　border-radius: 3px;
　　　margin: 25px 25px;
　　　position:relative;
　　　float: left;}
.rotatebox {
　　　border:1px solid #999;
　　　background:#FFF;
　　　width:100px;
　　　height: 100px;}

次は、ボックスを回転させる任意のボックスを用意し設定します。

ボックスにマウスオーバーしたときは時計周りに360度、2秒間回転するように、「kaiten」というアニメーション名でrotate値を指定します。

半時計周りに回転させたい場合は、「transform: rotate(-360deg);」のように負の値を指定します。

CSS：rotate 指定

.rotating {
　　　cursor: pointer;
　　　transform-style: flat; }
.rotating:hover {
　　　animation: kaiten 2s linear infinite; }
 
@keyframes kaiten {
　　　0% { 
　　　transform: rotate(0deg);   }
　　　100% {
　　　transform: rotate(360deg);  }
　　　}

親ボックス(backbox)に回転対象となる子ボックス(rotatiebox)とそれを回転させるように回転アニメーションが掛かった任意の回転ボックス(rotating)を配置したのが以下の結果となります。

HTML

<body>
 <div class="backbox">
  <div class="rotating">
    <figure class="rotatebox">時計周り</figure>
  </div>
 </div>
</body>

▼　以下の各円形にマウスを当ててみてください。

時計周り

半時計周り

transformプロパティ:rotate()
rotate(回転角度)	要素に2D回転を指定します。
rotateX(回転角度)	X軸に時計回りの回転を指定します。
rotateY(回転角度)	Y軸に時計回りの回転を指定します。
rotateZ(回転角度)	Z軸に時計回りの回転を指定します。
rotate3d(数値, 数値, 数値, 回転角度)	rotate3d()関数では、最初の3つの数値にそれぞれx,y,zの距離を指定し任意の軸の方向を指定し、最後に回転角度に時計回りの3D回転を指定します。