CSSによる3D表現の基礎

サンプルはこちら。

See the Pen klsHB by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

CSSアニメーションを利用することで3D表現も可能です。

CSS(Sass)

body {
  background: #000;
  @include perspective(500px);
}
div {
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid 1px #fff;
  background-color: rgba(#fff,.2);
  @include border-radius(50%);
}
.box1 {
  @include animation(rotate 2s 0s infinite linear);
}
.box2 {
  @include animation(rotate 2s .25s infinite linear);
}
.box3 {
  @include animation(rotate 2s .5s infinite linear);
}
.box4 {
  @include animation(rotate 2s .75s infinite linear);
}
@-webkit-keyframes rotate {
  0% {@include transform(rotateY(0));}
   100% {@include transform(rotateY(360deg));}
}

ちょっと長いので要点のみ抜粋しています。

3D状に見せるキモの部分はbodyに適用させている「perspective」で、今回は500px分の奥行きを用意しています。

それに対し、box1～4に「rotate」のアニメーションを0.25秒ずつディレイをかけて適用させています。
その「rotate」はY軸で360度回転するアニメーションになっています。

奥行きを付け軸回転を行うことで擬似的な3D表現を行っています。