IsometricSass - CSSだけで実現する3Dライブラリ
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