[CSS]立体的に配置したエレメントをアニメーションで広げるスタイルシート

エレメントを3Dに配置し、アニメーションを使った面白いエフェクトを実装するスタイルシートをmarco folioから紹介します。

デモのキャプチャ

3d animation using pure CSS3
デモページ

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

デモのキャプチャ

キャプチャはChromeで、Safariは動きが少しぎこちないです。

ここまでくると、FlashなのかJavaScriptなのかCSS3なのか一目では分からないですね。

sponsors

top of page

©2024 coliss