HTMLとCSSのみで3D立方体を作ってぐりぐり回してみる。

マークアップ

2015.09.16(Wed)

こんにちは。マークアップエンジニアの渡邊です。

Web上での3Dといえば、 WebGL ですが、HTMLとCSSのみでも、簡単な3Dなら実装できることをご存知でしょうか?

今回は3D立方体を作ってみたいと思います。
画面上でキューブが動くだけでなくHTML、SCSSも合わせて確認することができます。
是非ぐりぐり触ってみてください! ※ブラウザはGoogle Chromeで見てください。

立方体を作る。

まず200px × 200pxの立方体を作ります。

正面、後面を作る


正面は中心から100px前である必要があるので、

-webkit-transform: translateZ(100px);

とし、逆に後面は100px後ろである必要があるので、

-webkit-transform: translateZ(-100px);

とします。

右面、左面、上面、下面を作る


右面・左面は、それぞれ左右に100px移動させ、横に90度回転させます。
上面・下面は、それぞれ上下に100px移動させ、縦に90度回転させます。

これで立方体は完成です。

マウスオーバーで回転させる。

縦(x軸)に180度回転させる。


※マウスを合わせるとキューブが回転します。


3Dで見せたい要素に、

-webkit-transform-style:preserve-3d;

を指定し、アニメーションさせる要素に、

-webkit-transition:all 1s;

を指定します。(1sは1秒のことです。)

そして、今回は .cube を縦(x軸)に180度回転させるので、

-webkit-transform: rotateX(180deg);

を追記します。

横(y軸)に180度回転させる。


※マウスを合わせるとキューブが回転します。


今回は、横(y軸)に180度回転させるので、

-webkit-transform: rotateY(180deg);

とします。

z軸に180度回転させる。


※マウスを合わせるとキューブが回転します。


z軸に180度回転させるので、

-webkit-transform: rotateZ(180deg);

とします。

合わせ技もできます。


※マウスを合わせるとキューブが回転します。


縦(x軸)、横(y軸)、z軸をそれぞれ180度回転させる事もできます。

-webkit-transform: rotateZ(180deg);

まとめ

いかがでしたか。
難しいと思われがちの3Dですが、意外と簡単に表現できると思われたのではないでしょうか。

ブラウザによって差があるので、実務で使えるようになるにはまだ先ですが、今のうちに覚えておくと、いつかきっと役に立つ日が来ると思います!