CSS3：3Dギャラリー

サンプルはこちら。

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

JavaScriptを使わずCSSだけで完全な3D表現が可能です。
※IEではお察しください。

解説

今回のコードは長めなので要点のみ抜粋します。

<li>を伸ばし、端に<div>を置く (Sass)

li {
  position: absolute;
  display: block;
  list-style: none;
  width: 100%;
  ～

  > div {
    float: left;
    width: 100px;
    height: 100px;
    ～
  }
}

要点としてはこの辺りで、この時点では3Dでも何でもありません。

左右に伸びた<li>の端に<div>をfloat:leftで詰めています。
考え方として、この<li>を回転させて<div>が円周上になるイメージをこの時点で思い浮かべてください。

<li>内の<div>をY軸90度回転する

li {
  ～
  > div {
    ～
    @include transform(rotateY(90deg));
    ～
  }
}

ここで<div>をY軸90度回転させ、<div>を内側に向けています。

<li>を角度をずらしつつ複製する

@for $i from 0 through $liNum {
  li:nth-child(#{$i + 1}) {
    @include transform(rotateY(($i * $liDeg)+deg));
  }
}

Sassのループ記述になっていますが、<li>の1番目～10番目まで少しずつY軸の角度をずらすスタイルを設定しています。これで<li>がプロペラ状に並びます。

親の<ul>にアニメーション指定

ul {
  ～
  @include transform-style(preserve-3d);
  @include animation(rotate 60s infinite linear);
}

<ul>をY軸で回転させることで全体が回るようになります。

また幾つかのタグ、クラスに「perseve-3d」を指定しています。
これはCSSでの3D表現を有効にする指定のため、3D表現したい要素の親要素に必ず指定する必要があります。