cssで3D表現する件

2020.05.07 TECH: cssで3D表現する件

※本記事は『transform-style』をサポートしているブラウザでご覧ください
Can I use...まぁ要するにie(インターネットエクスプローラー)以外のブラウザですね^^;

グルグル回るよ…いつまでも

とりあえず簡単な 3D表現 ということで手っ取り早く、ありきたりではありますが立方体(正六面体)を回してみました。(まぁ回すことによって無理矢理3D感を出しているとも言う…)

ザックリ解説

html

div.cube-box
  ul.cube--small
    - for (var ss = 0; ss < 6; ss++)
      li
  ul.cube--large
    - for (var ll = 0; ll < 6; ll++)
      li
  p グルグル回るよ…いつまでも

ブッチャケhtml構造は何でも構いません。
立方体(正六面体)は6面あるので要素が6つあれば、それだけでよし
ちなみにサンプルソースは、少しだけ見栄えを気にしてキューブインキューブにしたので (ul>li×6)×2 という構造になっております。 ※キューブインキューブ：今さっきテキトーに作った言葉

css

3D表現するための準備を親要素に仕込みます

6面の親要素にあたる ulタグ に下記をそれぞれ設定します。

ul{
  width:60px;
  height:60px;
  transform-origin:50% 50% -30px;
  transform-style:preserve-3d;
}

transform-origin で親要素に対してセンタリング ※幅・高さを 60px に設定しているので 50％ 50％の位置から -30px することで中心に
transform-style を preserve-3d に設定しているので奥行きのある3D空間として認識されます ※overflow:hidden; が指定されている要素には transform-style:preserve-3d; は適用されません

6面をサイコロ状に配置します

6面を表示する要素である liタグ に下記をそれぞれ設定します。

li{
  width:60px;
  height:60px;
  position:absolute;
  &:nth-child(2){
    transform:translateZ(-60px);
  }
  &:nth-child(3){
    transform-origin:bottom;
    transform:rotateX(90deg);
  }
  &:nth-child(4){
    transform-origin:top;
    transform:rotateX(-90deg);
  }
  &:nth-child(5){
    transform-origin:left;
    transform:rotateY(90deg);
  }
  &:last-child{
    transform-origin:right;
    transform:rotateY(-90deg);
  }
}

見ての通りです。
position:absolute; で浮揚要素とし transform で面の位置を調整しています。
一応、一面一面解説すると下記になります。

正面：位置を一切ズラさず、そのまんま(これが基準になります)
奥の面：transform:translateZ(-60px); にて正面に対して 60px 奥へ(結果的に奥の面)
底面：transform-origin:bottom; transform:rotateX(90deg); にて基準点(bottom)からX軸に対して90度変形(結果的に底面)
上面：transform-origin:top; transform:rotateX(-90deg); にて基準点(top)からX軸に対して-90度変形(結果的に上面)
左面：transform-origin:left; transform:rotateY(90deg); にて基準点(left)からY軸に対して90度変形(結果的に左面)
右面：transform-origin:right; transform:rotateY(-90deg); にて基準点(right)からY軸に対して-90度変形(結果的に右面)

これにて、一片を 60px とした立方体(正六面体)が出来上がりました。
でもこのままでは実際には、ただの正方形が表示されるだけなので animation を使ってイイ感じにクルクルと回せば完成です。
※下記、アニメーションさせる一例

@keyframes kurukuru{
  0% {transform:rotateX(0turn) rotateY(0turn) rotateZ(0turn);}
  100% {transform:rotateX(1turn) rotateY(2turn) rotateZ(1turn)}
}

恒例の役に立たない3D実装例

球体の3D表現

球体に見えるかどうかは別として…題材は一般生活をしていると必ず誰しもが週に一度は話題にするであろう『シクロブタン』です。
一応、念のためザックリ説明すると…
シクロブタン(cyclobutane)は、分子式 C₄H₈ 分子量 56.11 のシクロアルカンで、別名テトラメチレン(tetramethylene)。融点 −80℃、沸点 13℃、CAS登録番号は 287-23-9。常温で無色の可燃性気体で、エタノール、アセトンに可溶、水に不溶である…なんのこっちゃ
※当然のごとく Wikipedia まんまっす(^^ゞ

立方体(正六面体)では、ややインパクトが弱いと感じたので正十二面体を回したった

正五角形(12個)を二面角 arccos(−1/√5) で組み合わせたのが正十二面体になります。
css的にも、算数的にも結構悩まされましたが、最終的にはほぼほぼ強引に書き上げた感じですね。
チカラワザ万歳！！

四次元立方体の面数を数えるためだけに書いてみた…

皆さまは「四次元立方体の面数はいくつ？」って聞かれて即座に答えられますか？
日常的に使用頻度の高い会話だと思いますので、一社会人として、「あーあの四次元正多胞体の一種で、四次元超立方体のことね！
頂点の数は16・辺の数は32・面の数は24・立体の数は8！」と、これくらいは即座に答えられるようにしておきたいですね。

まとめ

基本的な3D表現に関しては、ここに書いたサンプルで大抵の立体表現は可能です。
ポイントとなるのは上記にも書いた通り preserve-3d で3D空間を作り、transform-origin で変形する際の基準点を指定し、rotate で面を回転させ、perspective で奥行きを調整し、translate で位置調整をする。
これだけで雰囲気三次元表現が割と簡単にできます。
画像だったり、SVG だったりと組み合わせることで、さらに表現する幅は広くなると思います。

この記事が、どこかの誰かのアイディアのヒントのキッカケのカケラになることを祈りつつ…
バーイ、センキュー