[JS]レイヤーに要素を配置し、分離して3Dにぐるぐる回転させるスクリプト -CSSMatrix

jQueryのプラグイン「CSSMatrix」を使って、不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転して表示するデモを紹介します。

デモのキャプチャ

3D-ifying Documents Using CSS Transforms

デモは最新のモダンブラウザでご覧ください、IEは9+、できればIE10でご覧ください。

デモのキャプチャ

demo 1

demo 1は、IE9+とモダンブラウザで動作するためのベーシックなスタイルです。

デモのキャプチャ

demo 2

demo 2は、JavaScriptでclassを変更し、コントロールします。

デモのキャプチャ

demo 3

demo 3は、IE9で3Dのレンダリングができないので、2Dの描画との比較です。

デモのキャプチャ

demo 4

demo 4は、SVGを使って3Dにレイヤーを変形させるデモです。

ここから下のデモは、マシンパワーを必要とするデモです。

デモのキャプチャ

demo 5

デモのキャプチャ

demo 6

デモのキャプチャ

demo 7

top of page

©2017 coliss