CSS3 transform rotate系まとめ

transform: rotate 系まとめ

transform: に組み合わせる rotate 系の関数。

使える関数

• rotate(angle)
• rotateX(angle)
• rotateY(angle)
• rotateZ(angle)
• rotate3d(x, y, z, angle)

transform 系の要素について

適用する要素のpositionはabsoluteにする必要があります。
角度を表す数字は<angle>データ型を使用します。
一周 360 度でおなじみの度(deg)やラジアン(rad)、グラード(grad)、1 回転を表すturnなどが使えます。
時計方向がプラスの値、反時計回りはマイナスの値を指定します。

検証サンプル

動きがわかりやすいようにアニメーションしているので、ちょっと CSS が冗長です。

rotate(z)

画像を時計回りに回転します。

.anm-rotate {  
  animation: rotate 0.8s alternate running infinite;  
}  

@keyframes rotate {  
  100% {  
    /* z軸を中心にに180deg回転 */  
    transform: rotate(180deg);  
  }  
}  

rotateX(x)

そのまんま、x 座標の回転。rotateY、rotateZも同様です。

.anm-rotate-x {  
  animation: rotate-x 0.8s alternate running infinite;  
}  

@keyframes rotate-x {  
  100% {  
    /* x軸を中心にに180deg回転 */  
    transform: rotateX(180deg);  
  }  
}  

rotateZはrotateと同様の動きになります。

.anm-rotate-z {  
  animation: rotate-z 0.8s alternate running infinite;  
}  

@keyframes rotate-z {  
  100% {  
    transform: rotateZ(180deg);  
  }  
}  

rotate3d(x, y, z, 回転角度)

最初の３つの数値が x,y,z の方向ベクトルになります。
最後の回転角度で、ベクトルに対する時計回りの回転角度を指定します。

.anm-rotate3d {  
  animation: rotate3d 0.8s alternate running infinite;  
}  

@keyframes rotate3d {  
  100% {  
    /* x,y,z方向にベクトルを与え、時計回りに180度回転 */  
    transform: rotate3d(1, 2, 3, 180deg);  
  }  
}  

<angle>の検証

下のボタンに合わせて上のテキストボックスが回転します。

45deg 3.141rad -50grad 1.75turn0turn

• deg: 度数法（度）、円一周は 360deg
• grad: グラード、円一周は 400grad
• rad: 弧度法（ラジアン）、円一周は 2π で、およそ 6.2832rad です、 1rad は 180/π
• turn: 回転数、円一周は 1turn

この中ではdeg、turnが使いやすいですかね。
gradなんて調べていて初めて知りました。

labo link

Rotate