イラストを使わずに、Webページに斜めから俯瞰したアイソメトリックをつくりだすCSSライブラリ -IsometricSass

アイソメトリックの斜めから俯瞰したイラストなどをよく見かけますね。そのアイソメトリックをWebページにつくりだすCSSのライブラリを紹介します。

HTMLは非常にシンプルで、要素をアイソメトリックにしたり、斜めのグリッドを配置したり、アニメーションさせたりできます。

デモのキャプチャデモのキャプチャ

IsometricSass
IsometricSass -GitHub

IsometricSassの特徴

IsometricSassはJavaScriptを必要としないSassベースのフレームワークで、CSSの3D Transformsを使用してアイソメトリックの空間をWebページ上につくりだします。MITライセンスで、商用でも無料で利用できます。

要素を配置するだけでなく、シャドウをつけたり、アニメーションに浮かせたり、回転させたり、さまざまなエフェクトも用意されています。

デモのキャプチャ

ふわりと浮かせるアニメーション

CSSの3D Transformsのサポートブラウザは、下記の通りです。

サイトのキャプチャ

3D Transformsのサポートブラウザ

IsometricSassのデモ

デモでは、IsometricSassで実装できる要素やエフェクトを楽しめます。

サイトのキャプチャ

デモページ: Context

アイソメトリックの斜めのグリッドを配置するのも簡単です。

サイトのキャプチャ

デモページ: Grid

アイソメトリックの空間にパネルを配置します。

サイトのキャプチャ

デモページ: Plane

パネルにシャドウをつけると、かなりリアルになります。

サイトのキャプチャ

デモページ: Shadow

立体的な要素も簡単に配置できます。

サイトのキャプチャ

デモページ: Cube

ポジションの移動。

サイトのキャプチャ

デモページ: Position

ふわりとパネルを浮かせます。

サイトのキャプチャ

デモページ: Animation

キューブ状の要素は回転させてもいいですね。

サイトのキャプチャ

デモページ: Rotate

IsometricSassの使い方

Step 1: アイソメトリックのスペースを作成

アイソメトリックのスペースを用意します。

Step 2: グリッドを作成

斜めのグリッドを用意します。

グリッドのサイズ、線の太さ、線のカラーは自由に定義できます。

Step 3: パネルを作成

アイソメトリックのスペースにパネルを配置します。

パネルの幅・高さ・カラーは自由に定義できます。

シャドウやキューブ、アニメーションなどの実装は、デモページをご覧ください。

sponsors

top of page

©2019 coliss