CSS3のアニメーションサンプルで、立方体を扱ったものは数あれど、それ以上の多面体のサンプルが見当たらなかったので、倍の12面体を作りました。 イメージ 概要 今回はそのサンプルを題材に、CSS3で新たに追加されたアニメーション系のプロパティをご紹介します。 ※今回ご紹介するプロパティは、執筆時点では全て要ベンダープレフィックスです。 ※対応ブラウザ:Chrome 12~, Safari 5~ Mozillaは「現時点では Z 軸はサポートされていないため 3D の回転や 3D 拡大縮小、3D 変換はサポートされていません。」だそうです。 MDN – CSS transforms の利用 ※グラフィックボードが3Dの表現に対応している必要があります。 ※動作にはCPUパワーが少々必要になります。 HTMLサンプル ※各面はリンクになっています。 回転方向を指定できるコントローラー付きのサン
![JavaScriptなし!! CSSだけで実現する3Dアニメーション | HTML5GOGO](https://cdn-ak-scissors.b.st-hatena.com/image/square/7728a1926cc2fe5dd9c6a5242daa1eb29720ec9a/height=288;version=1;width=512/http%3A%2F%2Fhtml555.jp%2Fadmin%2Fwp-content%2Fuploads%2Fpenta_eyecatch.jpg)