Webデザイン関連(RSSRSS)のトピックです。SEOとWebデザインを共有する、という観点で情報を配信します。

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

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

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

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

CSS 3D Meninas

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

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

この効果はmootoolsやjQueryのプラグイン(mParallaxjParallax)を使えば同じ表現を実現出来ます。
実用性は期待できませんが、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

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

URL:
TRB:

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

*は必須です

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

You can add images to your comment by clicking here.

WPデザインギャラリー