ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2