Web上で3Dを描くのは大変です。多くの場合、CanvasであったりWebGLを使いますが、そのためのライブラリを利用しなければなりません。覚えることもたくさんあり、ちょっとした表示を行うのには不便です。 そこで使ってみたいのがIsometricSassです。Sassライブラリとなっており、CSSだけで3D表現を実現できます。

IsometricSassの使い方

段階的に紹介します。まずテキストを斜めに表示する例。

グリッド。

パネル。

枠線。

エッジ。ちょっと厚みが感じられます。

影付き。

キューブ。

グリッドの中で浮かせています。

アニメーションさせた例です。

さらに影を付けます。

キューブの回転。

上記のテクニックを組み合わせることで、部屋のような表現も。

IsometricSassはSassなので、用意された関数を適用した上でCSSに変換して利用します。JavaScript不要でアニメーションを実現できるのが魅力的です。もちろんJavaScriptと組み合わせることで、よりインタラクティブな表現が可能になるでしょう。

IsometricSassはCSS製のオープンソース・ソフトウェア（MIT License）です。

IsometricSass MorganCaron/IsometricSass: Sass library to make isometric 2D without javascript