[JS]レイヤーに要素を配置し、分離して3Dにぐるぐる回転させるスクリプト -CSSMatrix
Post on:2013年4月4日
jQueryのプラグイン「CSSMatrix」を使って、不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転して表示するデモを紹介します。
![デモのキャプチャ](/wp-content/uploads-201301/2013040405.gif)
3D-ifying Documents Using CSS Transforms
デモは最新のモダンブラウザでご覧ください、IEは9+、できればIE10でご覧ください。
![デモのキャプチャ](/wp-content/uploads-201301/2013040405-02.png)
demo 1は、IE9+とモダンブラウザで動作するためのベーシックなスタイルです。
![デモのキャプチャ](/wp-content/uploads-201301/2013040405-03.png)
demo 2は、JavaScriptでclassを変更し、コントロールします。
![デモのキャプチャ](/wp-content/uploads-201301/2013040405-04.png)
demo 3は、IE9で3Dのレンダリングができないので、2Dの描画との比較です。
![デモのキャプチャ](/wp-content/uploads-201301/2013040405-05.png)
demo 4は、SVGを使って3Dにレイヤーを変形させるデモです。
ここから下のデモは、マシンパワーを必要とするデモです。
![デモのキャプチャ](/wp-content/uploads-201301/2013040405-06.png)
![デモのキャプチャ](/wp-content/uploads-201301/2013040405-07.png)
![デモのキャプチャ](/wp-content/uploads-201301/2013040405-08.png)
sponsors