[CSS]立体的に配置したエレメントをアニメーションで広げるスタイルシート
Post on:2010年4月28日
エレメントを3Dに配置し、アニメーションを使った面白いエフェクトを実装するスタイルシートをmarco folioから紹介します。

3d animation using pure CSS3
デモページ
使用しているのはCSS3で、対応ブラウザはWebkit系のChrome, Safariです。
デモでは3Dに配置された三つの映画のポスターをマウスオーバーすると、重なり具合を変えながらポスターをアニメーションで横に広げます。

キャプチャはChromeで、Safariは動きが少しぎこちないです。
ここまでくると、FlashなのかJavaScriptなのかCSS3なのか一目では分からないですね。
sponsors