CSS 애니메이션으로 회전

CSS를 사용하여 사각형 회전

<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);
  }
}