🗂

CSSアニメーションで回転をさせてみる

2021/05/28に公開

CSSで矩形を回転する

CSSアニメーションで3dで回転させてみましょう。
わかりやすいように文字列も描いてみます。

<div id="base">
  <div id="rectangle">矩形を描いてみる</div>
</div>

#rectangle {
  width: 500px;
  height: 300px;
  font-size: 5em;
  border-style: solid;
  border-width: 10px;
  border-color: #000000;
  background-color: #0000ff;
  
  /* 以下がアニメーション*/
  animation-duration: 10s;
  animation-name: anim;
}

@keyframes anim {
  0% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    transform: rotate3d(1, 0, 1, 300deg);
  }
}

rotateってすごいですよね。
rotate3dを使って、x軸、y軸、z軸の値を指定します。
rotate3d(x, y, z, 回転する角度) ですね。
この場合、x軸とz軸を回転させています。

CSSで矩形を回転する

Discussion