CSSがこんなに進化してるとは!18才の少年がつくった3Dアニメーションのライブラリがすごすぎる -voxel.css

CSSアニメーションの進化もすごいですが、3DのCSSアニメーションも驚きの進化です!

高校を卒業したばかりの18才の少年がつくった3Dアニメーションのライブラリを紹介します。

サイトのキャプチャ

voxel.css
voxel.css -GitHub

voxel.cssのデモ

上部のアニメーションgifは、voxel.cssのトップページで楽しめます。
ファイルサイズの関係で尺を半分くらいにしているので、ぜひ全編を下記ページでお楽しみください。

サイトのキャプチャ

voxel.css

トップページの下の方では、アニメーションがどれくらい快適に動作するかが分かります。

サイトのキャプチャ

voxel.css: デモ

また、デモページでは3Dのオブジェクトがさまざまな動きをします。

サイトのキャプチャ

デモページ

  • ドラッグ: 軌道
  • Shift+ドラッグ: パン
  • スクロール: ズーム
  • クリック: オブジェクトの追加
  • 右クリック: オブジェクトの削除

voxel.cssの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

Step 2: HTML

HTMLは特に必要ありません。
領域の確保をする必要もなく、JavaScriptに記述します。

Step 3: JavaScript

オブジェクトやアニメーションをJavaScriptで設定します。

重要なクラスは、4つ。

Voxel
オブジェクトの設定です。
Scene
ただのカメラで、回転・パン・ズームして、voxelsを含むことができます。
World
voxelsの状態を保存します。
Editor
voxelsのあらゆる変化を設定します。

top of page

©2016 coliss