CSSだけで3Dボックスを書いてみたよ
こんにちは！
この記事は、 CSSだけで3Dボックスを書いてみた記録です！！
なんでそんなことしようと思ったかって・・・・・？？
単純に興味本位です！！！なんかワクワクするじゃん？？
※3Dを描くには便利なthree.jsなどあるのですが、その記事はまた別の機会に（＾＾）
CSSだけで3Dボックスを書いたデモはこちら↓
See the Pen box by dyna (@sakudyna) on CodePen.
広告
考え方
- 1.面になる部分をHTMLに書く
- 2.書いた要素を立体にする・遠近感をつける
- 3.要素をx,y,z（軸）を使って立体的に組み立てる
- 4.アニメーションをつけて回す
1.面になる部分をHTMLに書く
まずはHTMLに要素を書きます。
1 2 3 4 5 6 7 8 9 10 11 12 | <div id= "box"> <div id = "boxBase"> <div class="top on" data-text="red"></div> <div class="bottom on" data-text="pink"></div> <div class="front on" data-text="yellow"></div> <div class="back on" data-text="orange"></div> <div class="left on" data-text="green"></div> <div class="right on" data-text="blue"></div> </div> </div> |
id=”box”・・・表示する場所
id=”boxBase”・・・立方体
boxBaseの子要素 class=”~on”・・・立方体（boxBase)の面
2.書いた要素を立体にする・遠近感をつける
このままだと表示されないので、CSSを追加していきます。
1 2 3 4 5 6 7 8 9 10 | #box{ perspective: 1000px; width:200px; height:200px; position:relative; top:30vh; left:20vw; } |
#boxで表示する場所を決めます。
perspective:1000px; と記載すると、遠近感が出ます。
perspectiveについてはこちらのサイトが分かりやすく、デモもあります↓
perspective は CSS のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて三次元に配置された要素に遠近感を与えます。
引用元：MDN web Docs
1 2 3 4 5 6 7 | #boxBase { transform-style:preserve-3d; width:200px; height:200px; } |
次に、#boxBase（立方体）に3Dを付与します。
transform-style は CSS のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。
引用元：MDN web Docs
つまり、 transform-style: preserve-3d;とすると、その子要素を3Dにできるということになります。
3.要素をx,y,z（軸）を使って立体的に組み立てる
さて、面を組みたたて表示させたいと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | #boxBase div { position:absolute; width:200px; height:200px; cursor: pointer; } .top { transform:translateY(100px) rotateX(-90deg); background-color:rgba(250, 59, 59, 0.7); } .bottom { transform:translateY(-100px) rotateX(90deg); background-color:rgba(250, 59, 218, 0.7); } .front { transform:translateZ(100px); background-color:rgba(250, 231, 59, 0.7); } .back { transform:translateZ(-100px) rotateX(180deg); background-color:rgba(250, 167, 59, 0.7); } .left { transform:translateX(-100px) rotateY(-90deg); background-color:rgba(104, 250, 59, 0.7); } .right { transform:translateX(100px) rotateY(90deg); background-color:rgba(59, 148, 250, 0.7); } #boxBase div:hover { background-color:rgba(0, 5, 2, 0.658); } |
#boxBase divで面の横幅、縦幅を設定します。
面のクラス[.top,.bottom,.front~]に背景色と、変形を設定します。
ここで大事なのが、transform。transformに色々設定されてますね。
・translateY(Y軸の移動距離)
・translateZ(Z軸の移動距離・ビューアに近づくか、遠ざけるか)
・rotateX(X軸をもとにする回転角度)
・rotateY(Y軸をもとにする回転角度)
rotateX、rotateYが少し分かりづらかったので、ピップアップ。
.topのrotateX(50deg); と変更するとこんな感じ。
.leftのrotateY(-50deg); とすると、こういう感じに。
それぞれ、X軸、Y軸をもとに回転しています。
ここまでを1面ずつ表示してみてみると・・・
top ↓ ※translateY(100px) rotateX(-90deg);
（bottomと逆だったかしら（ ＾ω＾）・・・）
top+bottom ↓
top+bottom+left ↓
top+bottom+left+right ↓
top+bottom+left+right+back ↓
top+bottom+left+right+back+front ↓(全部）
こんな感じで3Dになりました！！！
た、たのしい・・・・・！！！
4.アニメーションをつけて回す
これでも立体に見えなくはないのですが、分かりやすいように回してみたいと思います。
#boxBaseにアニメーションのCSSを追加していきます。
1 2 3 4 5 6 7 8 | #boxBase { transform-style:preserve-3d; width:200px; height:200px; animation: turn 8s linear 0s infinite normal none running; } |
animation: turn 8s linear 0s infinite normal none running; を追加しました。
このturnのキーフレームを設定します。
1 2 3 4 5 6 7 8 9 10 | @keyframes turn { 0%{ transform:rotateX(0deg) rotateY(0deg); } 100%{ transform:rotateX(360deg) rotateY(360deg); } } |
360度、ぐるっと回転させました。
そうすると、デモのような形になります！！
全体のコードは、デモに記載があるので、よかったら見てね（＾＾）
あとは、前回の「JSで円形に配置してルーレットを作成する」の復習を兼ねて、1つボックスをコピーして追加してみました。
実は右下の方にもう1つボックスがあります。（0.25ｘをクリックすると見えます）
See the Pen box by dyna (@sakudyna) on CodePen.
CSSでボックスを作って参考になったことは、X,Y軸をもとにした書き方、組み立て方が分かったことです。
今度はthree.jsの記事を書きたいと思います！！（現在勉強中）
ここまで読んで下さりありがとうございます。
<あわせて読みたい>
