どうも！chuckです。
前回、こちらの作品を紹介しました。
http://chuck0523.github.io/graduationPage/rotateAnime.html
もっとシンプルなモデルを作ったので、カンタンに解説していこうかなと思いますヽ(=´▽`=)ﾉ
作ったやつ
今回作ったのがこちら。
http://chuck0523.github.io/front-end-coding/rotateBoxes/rotateBoxes1.html
右上の丸いボタンを押すと左のボックスが回転します。
解説
コードを見ながら解説していきます。
HTML
まず、.cubeBottom, .cubeTop, .cubeBack, .cubeFront のクラスのついた4つの<div>があります。これがボックスの1つ1つの面になります。
4つの面を包んでいるのが .cubeというクラスのついた<div>です。この親要素を回転させることで、中身の4つの<div>も回転します。
そして.stageクラスの<div>は回転の土台のようになっています。
シンプルですねヽ(=´▽`=)ﾉ
CSS
ここはちょっと複雑かも。CSS3をゴリゴリ書いています。
まず、土台の.stageについて。
position: fixed; で top: 10%; left: 10%; の位置に固定しています。（今回はスクロールイベントが無いので、必要ないっちゃあないですが）
それからperspective！このプロパティは奥行きを設定しています。
実際にコードを書いていじってみると直感的に理解できるかと思います。僕も今回の開発でようやく理解できましたｗ
次にボックスの親要素。
まずposition: relative;を設定しています。子要素である4つの面にposition: absolute;を指定するためです。
translateZ(-150px)ではボックス全体を手前に動かしています。
最後にtransform-style: preserve-3d ;ですが、これめちゃめちゃ大事！transform-styleはデフォルトでは2dです。これを3dに設定することで、動きを平面から立体に変えることができます。
子要素の面のスタイルはこちら
まず、.cube div では全ての面にスタイルを一括指定をしています。そして各々の面では、背景色と座標と回転角度を設定しています。
translateY → 上下の座標移動（プラスで上昇、マイナスで下降）
translateZ → 前後の座標移動（プラスで手前に、マイナスで奥に）
rotateX → X軸を中心として回転角度。えっと、X軸の回転とはつまりお辞儀の方向です(´ω`)
これで４つの面を持つボックスと、回転の下準備が整いました。あとは回転イベントを付け加えるだけです。
jQuery
コードはとってもシンプルですね！
ボタンへのクリックをイベントの発火にしています。関数の内容は、４つの面の親要素である.cubeの角度を90°増やすものです。
これで包含されている子要素も回転するので、ボックスがぐるぐる回っているように見えますヽ(=´▽`=)ﾉ
まとめ的な
CSS3面白いです！最近ようやく慣れてきた感じがします。まだまだ対応していないブラウザのバージョンもありますが、使えるようになっておくに越したことはないと思います。
ここにJSでイベントを加えるとホントに楽しい！･ﾟ･(つД｀)･ﾟ･
ぜひぜひ、トライしてみてください！
Twitterもやってるよヽ(=´▽`=)ﾉ
Follow me!
CSS3のperspectiveをようやく理解できた…
— タク(chuck) (@chuck0523) 2015, 7月 19