コンパイラかく語りき

import { Fun } from 'programming'

CSS3とjQueryでボックスをぐるぐる回す解説。

どうも!chuckです。

前回、こちらの作品を紹介しました。

 

f:id:chuck0523:20150719130611p:plain

http://chuck0523.github.io/graduationPage/rotateAnime.html

 

chuckwebtips.hatenablog.com

 

もっとシンプルなモデルを作ったので、カンタンに解説していこうかなと思いますヽ(=´▽`=)ノ

 

 

作ったやつ

今回作ったのがこちら。

f:id:chuck0523:20150720121111p:plain

http://chuck0523.github.io/front-end-coding/rotateBoxes/rotateBoxes1.html

 

右上の丸いボタンを押すと左のボックスが回転します。

 

f:id:chuck0523:20150720121220p:plain

 

解説

コードを見ながら解説していきます。

 

HTML

gistf9a9de0c2552b54292b5

 

まず、.cubeBottom, .cubeTop, .cubeBack, .cubeFront のクラスのついた4つの<div>があります。これがボックスの1つ1つの面になります。

4つの面を包んでいるのが .cubeというクラスのついた<div>です。この親要素を回転させることで、中身の4つの<div>も回転します。

そして.stageクラスの<div>は回転の土台のようになっています。

 

シンプルですねヽ(=´▽`=)ノ

 

CSS 

gist00bb968a523d4978b442

ここはちょっと複雑かも。CSS3をゴリゴリ書いています。

 

まず、土台の.stageについて。

f:id:chuck0523:20150720122212p:plain

position: fixed; で top: 10%; left: 10%; の位置に固定しています。(今回はスクロールイベントが無いので、必要ないっちゃあないですが)

それからperspective!このプロパティは奥行きを設定しています。

 

www.htmq.com

 

実際にコードを書いていじってみると直感的に理解できるかと思います。僕も今回の開発でようやく理解できましたw

 

 

f:id:chuck0523:20150720122541p:plain

次にボックスの親要素。

まずposition: relative;を設定しています。子要素である4つの面にposition: absolute;を指定するためです。

translateZ(-150px)ではボックス全体を手前に動かしています。

最後にtransform-style: preserve-3d ;ですが、これめちゃめちゃ大事!transform-styleはデフォルトでは2dです。これを3dに設定することで、動きを平面から立体に変えることができます。

 

www.htmq.com

 

子要素の面のスタイルはこちら

f:id:chuck0523:20150720123353p:plain

まず、.cube div では全ての面にスタイルを一括指定をしています。そして各々の面では、背景色と座標と回転角度を設定しています。

 

translateY → 上下の座標移動(プラスで上昇、マイナスで下降)

translateZ → 前後の座標移動(プラスで手前に、マイナスで奥に)

 

rotateX → X軸を中心として回転角度。えっと、X軸の回転とはつまりお辞儀の方向です(´ω`)

 

これで4つの面を持つボックスと、回転の下準備が整いました。あとは回転イベントを付け加えるだけです。

 

jQuery 

gist6767a968226d354aac4c

 

コードはとってもシンプルですね!

ボタンへのクリックをイベントの発火にしています。関数の内容は、4つの面の親要素である.cubeの角度を90°増やすものです。

これで包含されている子要素も回転するので、ボックスがぐるぐる回っているように見えますヽ(=´▽`=)ノ

 

まとめ的な

CSS3面白いです!最近ようやく慣れてきた感じがします。まだまだ対応していないブラウザのバージョンもありますが、使えるようになっておくに越したことはないと思います。

ここにJSでイベントを加えるとホントに楽しい!・゚・(つД`)・゚・ 

 

ぜひぜひ、トライしてみてください!

 

Twitterもやってるよヽ(=´▽`=)ノ

Follow me!