CSS3 transform rotate系まとめ
create: 2018-10-27
CSS transform

transform: rotate 系まとめ

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

使える関数

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

transform 系の要素について

適用する要素のpositionabsoluteにする必要があります。
角度を表す数字は<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 座標の回転。rotateYrotateZも同様です。

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

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

rotateZrotateと同様の動きになります。

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

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

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

最初の3つの数値が 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>の検証

ここが回転

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

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

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

labo link

Rotate