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

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 面白かったのでご紹介。マウスホバーによるロールオーバーエフェクトをcssで3D表現したサンプルです。休日ですし、ちょっとネタ的な内容ですけど、これはこれで勉強になりました。いろいろと考えますね、ほんと・・ 例によってブラウザは限られてしまうんですが、良い感じの3Dエフェクトでした。 3D CSS rollovers マウスを乗せると縦とか横に回転します。 見ないとピンと来ないですよねという事でサンプルです。cssのみで動作しています。Chrome推奨。下にスクロールすれば何点かデモがあります。 Sample translate3dとかperspective この3D化にはtranslate3dというCSS3が使用されています。 極めていい加減な画像ですがX、Y、Z軸

[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とかつかえそう