» cssとHTMLのみで擬似的な3D表示を実現するCSS 3D Meninas

cssとHTMLのみで擬似的な3D表示を実現するCSS 3D Meninas

カテゴリ » WEBデザイン, cssやプログラミング
書いた日 » 水曜日, 12月 16th, 2009

これ凄いです。僕が知らなかった
だけかも知れませんが、この動き
でjs等も使用していないのは驚き
でした。cssとHTMLのみでマウス
オーバーした際の画像に3D効果
を出しています。

動作はIE8、Firefox3、Opera9、Safari 3、Chrome4などで動作するそうです。

CSS 3D Meninas

マウスオーバーし、左右に動かすと画像も動きます。

複数の透過レイヤーを重ねてhoverで動きを出しているみたい。何枚かの画像と下記のような画像を使ったｃｓｓスプライトを使って実現しているようです。

この効果はmootoolsやjQueryのプラグイン(mParallaxやjParallax)を使えば同じ表現を実現出来ます。
実用性は期待できませんが、cssとHTMLだけっていうのが凄い。ソースは以下でご確認下さい。

Pure CSS 3d Meninas (説明ページ：CSS 3D Meninas)

---

• 頂いたコメント
• トラックバック
• お読み下さい

【cssとHTMLのみで擬似的な3D表示を実現するCSS 3D Meninas】へのコメント 3

トラックバック

TRB:

1. Tweets that mention cssとHTMLのみで擬似的な3D表示を実現するCSS 3D Meninas - かちびと.net -- Topsy.com
2. » cssとHTMLのみで擬似的な3D表示を実現するCSS 3D Meninas – かちびと.net My_Room-bookmarks
3. FF買えましたか？ | Hiroiro

• かちびと.netにリンクの無いトラックバックは受付けてないです。
• コメントされる前にガイドラインをご覧下さい

この記事のトラックバックとURL

URL:
TRB:

お気軽にコメントして下さい

*は必須です

お名前*     :

メール*     :

Webサイト:

以下にコメントをどうぞ。いくつかのHTMLタグも使えます。

You can add images to your comment by clicking here.

サイト内検索