CSS3で立体を作る
CSS3のtransformをひと通りやりたかったので作ってみた。
表示例
文章でかなり説明しづらいので、最初に動いているものを…
止まっているとよくわからないので回してみました。
立体を表示する画面に設定するプロパティ
perspective
奥行きを設定するプロパティです。
数値が小さいほど奥行きが大きくなります。
perspective-origin
視点を設定します。
前の値が縦軸、後ろの値が横軸です。
50%に設定すると正面から見た視点になります。
立体の親要素に設定するプロパティ
transform-style
要素の子要素が3D空間に配置されるかどうかを設定します。
初期値がflatなので3Dにする場合は設定が必要です。
立体の子要素に設定するプロパティ
実際にtransformを使って変形させる為のプロパティです。
transform: translateZ();
3D空間での前後の位置を設定します。 マイナスの値を入れると元の位置よりも前に、プラスのあたいを入れると元の位置より後ろに配置されます。
transform: rotatoX,Y,Z();
2Dではrotato()で設定しますが、3DではX軸、Y軸、Z軸を基準に回転します。
HTML
<div class="wrap"> <div class="box"> <div class="dot parts"></div> <div class="red parts">1</div> <div class="blue parts">2</div> <div class="green parts">3</div> <div class="orange parts">4</div> <div class="pink parts">5</div> <div class="gray parts">6</div> </div> </div>
SCSS
実際に作成する時はperspective-origin: 150% 150%;
くらいで角度をつけてやると、各パーツの位置が見やすくなります。
html{ height: 100%; } body { background: #fff; font: 12px sans-serif; height: 100%; } /* 立体をレンダリングする領域の設定 */ .wrap{ overflow: hidden; height: 100%; -webkit-perspective: 250px; -webkit-perspective-origin: 50% 50%; -moz-perspective: 250px; -moz-perspective-origin: 50% 50%; } /* 立体の設定 */ .box{ position: absolute; font-size: 50px; width: 100px; height: 100px; top: 0px; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; } /* 立体のパーツの基本設定 */ .parts{ position: absolute; width: 100px; height: 100px; top: 0px; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; line-height: 100px; } .dot{ border: 1px dashed black; } /* 立体の各パーツを配置 */ .red{ background: rgba(red,0.8); -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); } .blue{ background: rgba(blue,0.8); -webkit-transform: translateZ(-50px); -moz-transform: translateZ(-50px); } .green{ background: rgba(green,0.8); -webkit-transform: rotateX(-90deg) translateZ(50px); -moz-transform: rotateX(-90deg) translateZ(50px); } .orange{ background: rgba(orange,0.8); -webkit-transform: rotateX(90deg) translateZ(50px); -moz-transform: rotateX(90deg) translateZ(50px); } .pink{ background: rgba(pink,0.8); -webkit-transform: rotatey(90deg) translateZ(50px); -moz-transform: rotatey(90deg) translateZ(50px); } .gray{ background: rgba(gray,0.8); -webkit-transform: rotatey(-90deg) translateZ(50px); -moz-transform: rotatey(-90deg) translateZ(50px); } /* アニメーションの設定 */ .box{ -webkit-animation: rotateY 5s linear infinite; -moz-animation: rotateY 5s linear infinite; } @-webkit-keyframes rotateY { 0% {-webkit-transform: rotateY(0deg) rotateX(0deg)} 100% {-webkit-transform: rotateY(360deg) rotateX(360deg)} } @-moz-keyframes rotateY { 0% {-moz-transform: rotateY(0deg) rotateX(0deg)} 100% {-moz-transform: rotateY(360deg) rotateX(360deg)} }