css3で実装する3Dなロールオーバーエフェクトのサンプル - かちびと.net

面白かったのでご紹介。マウスホバーによるロールオーバーエフェクトを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

[gaki_aa]

CSS3 ロールオーバー

[hanagejet]

translate のアニメーション参考。xyz軸を使うときに参考になる。

[warriorking]

css3で実装する3Dなロールオーバーエフェクトのサンプル - かちびと. net

[glat_design]

うーむ、サンプル見るとやっぱ面白そうですね。まだトランジションとかも把握してないですが…＞＜

[laplus-knsn]

so cool!

[jasmine_88]

Flipの動き方がいい

[globalwe6]

結構なめらかですごい

[kurenai7]

Flipいいなー

[kurechon]

Flipいいなー

[josch_so36]

flipとかつかえそう