面白かったのでご紹介。マウスホバーによるロールオーバーエフェクトをcssで3D表現したサンプルです。休日ですし、ちょっとネタ的な内容ですけど、これはこれで勉強になりました。いろいろと考えますね、ほんと・・ 例によってブラウザは限られてしまうんですが、良い感じの3Dエフェクトでした。 3D CSS rollovers マウスを乗せると縦とか横に回転します。 見ないとピンと来ないですよねという事でサンプルです。cssのみで動作しています。Chrome推奨。下にスクロールすれば何点かデモがあります。 Sample translate3dとかperspective この3D化にはtranslate3dというCSS3が使用されています。 極めていい加減な画像ですがX、Y、Z軸はこうなっています。 .box .front { -webkit-transform: translate3d(0,0,200
![css3で実装する3Dなロールオーバーエフェクトのサンプル - かちびと.net](https://cdn-ak-scissors.b.st-hatena.com/image/square/0d45d61094c8164048860ec23b34c24b1ea0bc07/height=288;version=1;width=512/https%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2011%2F12%2F3d00.jpg)