CSSで立方体を作ってみましょう・・・
難しそうだけど、便利な機能があるんだなぁ
上記のような立方体を作るにはCSSの transform-style というプロパティで３次元表示をする preserve-3d という値を設定することで可能になります。
transform-style プロパティ preserve-3d の使い方
<!-- 親要素であるcubeにtransform-styleを設定する -->
<div class="cube">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>まずは上記のように親要素の中に６個、子要素を作ります。
この子要素一つが、立方体の各1つの面になります。なので６つ必要です。
そしてこの親要素 .cube に
transform-style: preserve-3d; を指定します。
すると今子要素は上のような、XYZ軸のある３D空間に置かれます。
今度はこの子要素をX軸周り、Y軸周りに回転させ、適切な位置に移動させることによって立方体を構成していきます。
front と back の２面
これは transform: translateZ(+-〇〇); でZ軸に沿って前と後ろに移動させるだけです。
right と left の２面
今度は側面の2つなんですが、「Y軸で９０度回す」「適切な位置に移動させる」という作業が必要になります。
そして、その作業は【移動してから回転する】【回転してから移動する】の場合でかなり違いがあります。順番大事です。
移動してから回転する場合は、それまでのXYZ軸に変わりはないのですが、先に回転する場合はX軸とY軸ごと回転してしまうので、移動させようと思うとX軸ではなくてZ軸で移動させることになるからです。
自分は回転させてから移動させていたので結構混乱しました。先に回転した方がわかりやすくて楽だと思います。
ちなみに回転角度は+90度でも-90度でもどちらでもいいです。反転したらまずい文字とかがある場合は反転
top と bottom の２面
ここでも 「X軸で９０度回す」「適切な位置に移動させる」という作業が必要になり、順番によって書くコードが変わってきます。 【移動してから回転する】【回転してから移動する】の場合に気をつけて指定するようにしましょう。最初に回転すると今度はY軸とX軸が回転することになり、Z軸に沿って移動させることになります。
立方体のコード
というわけで、上の立方体のコードは右記のようになります。
気を付けるところは、子要素を
position: absolute;
top: 0;
left: 0;と絶対値で配置指定するところ。
そのために親要素に
position: relative;をつけておいてください。
それから、この立方体は斜め45度から見た図になっていますが、それは最初に親要素の座標を
transform: rotateX(-45deg) rotateY(-45deg); とX軸Y軸周りに回転させているからです。
下の方に回転するアニメをつけた立方体も載せておきます。これは親要素の X軸Y軸周りを360度回転させているものです。
<style>
.cube {
margin: 100px;
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-45deg) rotateY(-45deg);
/* デフォルトの角度 */
}
/* 各面 */
.cube div {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
/* front */
.cube div:nth-child(1) {
background: rgba(203,203,0,.3);
transform: translateZ(100px);
}
/* back */
.cube div:nth-child(2) {
background: rgba(0,255,203,.5);
transform: translateZ(-100px);
}
/* right */
.cube div:nth-child(3) {
background: rgba(232, 30, 255,.4);
transform: rotatey(90deg) translateZ(100px);
}
/* left */
.cube div:nth-child(4) {
background: rgba(127, 255, 255,.4);
transform: rotatey(90deg) translateZ(-100px);
}
/* top */
.cube div:nth-child(5) {
background: rgba( 255,255,203,.3);
transform: rotateX(90deg) translateZ(100px);
}
/* bottom */
.cube div:nth-child(6) {
background: rgba(255, 191, 127,.4);
transform: rotateX(90deg) translateZ(-100px);
}
</style>
<body>
<div class="cube">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
コメント