ブロックチェーン・AI・システム開発の株式会社INDETAIL

cssでもここまで描ける!チカラワザで作り上げた3D表現5連発

2018.08.24
nanba

テーブルレイアウト全盛期から、コーディングの仕事をしておりますが、一昔前なら Flashjsライブラリ を使用しないと表現しにくかったものが、最近ではcssのみの割と簡単な記述で実装できるようになったと感じています。
特に三次元・四次元表現は transformanimation を使用することで、さまざまな対応ができるようになりました。
長いこと二次元でしか考えてこなかった古く固着した脳みそを鍛えるために、勉強がてら、ありがちな3D表現をcodepenしてみました。

とりあえずありがちな立方体の3D表現

見ての通り技術的に特に難しいことはしていません。
まどろっこしい書き方をして、なんだったらあえて複雑に見えるようにしてるぐらいです。

流れ的に次は正八面体(正多面体)を書いてみた

See the Pen 正八面体をcssで書いてみた by nanba (@nanba) on CodePen.


正三角形を表現するのにイロイロと考えましたが、cssのみで表現することに拘ったため、結局無難に border で書きました@人並みに奢れや…です。

ここまできたら当然、正多面体定番の正十二面体をcssのみで書いてみるでしょ

See the Pen 正十二面体@cssバージョン by nanba (@nanba) on CodePen.


これはcss的にも、算数的にも結構悩みました。
cssで正五角形の書き方でハマり、正十二面体の二面角 arccos(−1/√5) で悩み…
ともあれほぼほぼ強引にチカラワザで書き上げた感じですね。

最初、面には【松本・ジュニア・大輔】と書いてありましたが、いくら何でもオフザケが過ぎるかなぁと思い、無難に数字表記に直しました…
私の脳では【正多面体=人志松本のすべらない話で使用されるサイコロ】と位置付けられているようです

さらに勢いがついたので、皆さまご存知四次元立方体(正八胞体)の面数を数えるためだけに書いてみた

See the Pen 4次元立方体(正八胞体)をcssのみで絵画 by nanba (@nanba) on CodePen.


こうなるとcssというより、少しだけ算数の知識が必要になります。
皆さまは「四次元立方体の面の数はいくつ?」って聞かれて即座に答えられますか?
私は結局これを作成するのに3時間ほど費やしましたので、即座というワケにはいきませんでした。
日常的に使用頻度の高い会話だと思いますので、一社会人として、
「あーあの四次元正多胞体の一種で、四次元の超立方体のことね!
頂点の数は16・辺の数は32・面の数は24・立体の数は8!」と、これくらいは即座に答えられるようにしておきたいですね。
※技術的には、所詮正方形を変形させているだけなので難しくはありません

おまけ

チカラワザの集大成…いやいやいやこれこそオフザケが過ぎるでしょ…

See the Pen 某有名キャラクター by nanba (@nanba) on CodePen.

あとがき

transform-origin で基準点を指定して
rotate で回転させ
perspective で奥行きをもたせて
translate で位置を調整する
たったこれだけで雰囲気三次元表現が簡単にできます。
ブラウザ側の解釈も日々広がっていますし、jsSVGWebGL などを組み合わせることで、その可能性はさらに大きなものになります。

先進技術系投稿が多いINDETAILですが、たまにはこういう【オフザケ投稿】もアリと個人的には思っております。
どれもこれも使いどころは皆無な 実用度ゼロcss ですが
『cssのみでこんなことできるだろうか?』って一瞬でも思ったら『まず書けっ!』という感じです。
検索してイイ感じのものをコピペするだけよりも、自分でハマり、悩み、試行錯誤して得られたものは、間違いなく自分のモノになります。
と、最後は結局説教じみたシメをする古い人間 nanba でした( ̄^ ̄)ゞ

nanba

INDETAILには珍しいチカラワザ系コーダー