Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】サイコロ回転【preserve-3d試してみた】

 どうも!LSSです!!

 

CSSのプロパティ&値に、
transform-style:preserve-3d;
というのがあります。

 

HTML上に置いた要素を変形(拡大縮小・回転など)させるtransformプロパティを3Dに対応させるための指定…らしいのですが、これがもうひとつよく分からない。

【CSS】裏表画像めくり【カードをめくる改変】 - Little Strange Software

のように、preserve-3dを指定しなくても「立体っぽい動き」にはなるので、指定した場合としない場合の違いが飲み込めずにいたんですね。

 

そして色々調べてみてたのですが、どうもこのpreserve-3d、使うと使わない場合よりもはるかに凄い「立体」表現ができるようです。

ちょっと作ってみましたが、参考にしたサイトのコードと大差なくて、自分のオリジナリティがないのがどうも…と思いつつも、晒してみますw

 

 

サイコロ回転

1
2
3
4
5
6

 

 

コード

<style>
@keyframes kaiten{
0%,10%{transform:rotateX(10deg) rotateY(10deg) rotateZ(0deg);}
15%,25%{transform:rotateX(10deg) rotateY(-80deg) rotateZ(0deg);}
30%,40%{transform:rotateX(-100deg) rotateY(0deg) rotateZ(-10deg);}
45%,55%{transform:rotateX(100deg) rotateY(0deg) rotateZ(10deg);}
60%,70%{transform:rotateX(10deg) rotateY(-260deg) rotateZ(0deg);}
75%,85%{transform:rotateX(10deg) rotateY(170deg) rotateZ(0deg);}
90%{transform:rotateX(370deg) rotateY(170deg) rotateZ(0deg);}
95%{transform:rotateX(370deg) rotateY(-190deg) rotateZ(0deg);}
100%{transform:rotateX(10deg) rotateY(10deg) rotateZ(360deg);}
}
.cb01{
position:relative;
transform-style:preserve-3d;
width:150px;
height:150px;
left:75px;
animation:kaiten 20s linear infinite;
}
.cb01 div{
position:absolute;
box-sizing:border-box;
width:100%;
height:100%;
padding:30px;
text-align:center;
font-size:50px;
border-radius:5px;
border:3px solid #ddddddc0;
}
.cbs1{
background-color:#ffddddc0;
transform:translateZ(75px);
}
.cbs2{
background-color:#ffddffc0;
transform:rotateY(90deg) translateZ(75px);
}
.cbs3{
background-color:#ddffddc0;
transform:rotateX(90deg) translateZ(75px);
}
.cbs4{
background-color:#ddffffc0;
transform:rotateX(-90deg) translateZ(75px);
}
.cbs5{
background-color:#ffffddc0;
transform:rotateY(-90deg) translateZ(75px);
}
.cbs6{
background-color:#ddddffc0;
transform:rotateY(180deg) translateZ(75px);
}
</style>
<div class="cb01">
<div class="cbs1">1</div>
<div class="cbs2">2</div>
<div class="cbs3">3</div>
<div class="cbs4">4</div>
<div class="cbs5">5</div>
<div class="cbs6">6</div>
</div>

 

 

参考にしたサイト

developer.mozilla.org

↑のページの下のほうの例にあるコードを参考にさせていただきました。

が、立方体を構築する方法として内容を咀嚼しながら書いたものの、結局ほぼ同じコードに^^;

 

考え方としては、

<div class="cb01">
<div class="cbs1">1</div>
<div class="cbs2">2</div>
<div class="cbs3">3</div>
<div class="cbs4">4</div>
<div class="cbs5">5</div>
<div class="cbs6">6</div>
</div>

 

6つのdiv要素(class="cbs1~6")をひっくるめてdiv要素(class="cb01")で囲み、内側の6つの要素を、
transform:rotateY(-90deg) translateZ(75px);
「要素幅の半分のサイズだけ、(仮想的に)画面から手前に浮かせて回転させる」事で、立方体を構築しています。

 

※回転の中心となるtransform-origin、設定してないので横位置も縦位置も真ん中ですが、transform-originには前後の概念(Z座標)がない。
が、立体的な回転を加えた場合、Z座標的には常に「画面表面」に当たる位置が中心となるため、「縦・横・前後全て真ん中を回転の軸とする」ために、translateZで幅の半分に当たるサイズを指定した上で、立方体の6面の位置に来るように回転させてピッタリ立方体にしようとしているんだな、と理解しました。

 

そうして構築した立方体(の各面となる6つのdiv)をまとめてくくった一つのdivに対してanimationを設定し、rotateX、rotateY、rotateZを色々変化させるkeyframesを呼び出す事で、「まとめてくくった一つのdiv」を回転させると、その中身である6つのdivもちゃんと3D空間を意識しながら回転してくれるんですね。←これがpreserve-3dを使わないとできませんでした。

 

 

CSSでこんな感じの3D表現ができるんですね

工夫すれば、より複雑な3Dモデル構築も可能といえば可能なようです。

 

…ただし、位置決めなどの指定がとても複雑で、例えば今回は立方体でしたが、これを直方体にしようと思っただけでも話がややこしくなりそうです^^;

 

ので「できるっちゃできるけど、本格的に立体表現するなら他の方法を模索したほうがいい」ものでもあるようですねw

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^