CSSで3D画像を実現するサンプルいろいろ

CSSで3D画像を実現するサンプルいろいろ

Posted at December 23,2011 2:34 AM
Tag:[CSS, Firefox]

昨日の「Firefox10の新機能について」でも紹介しましたが、CSS 3D Transformの機能を使えば、3D画像をCSS(とHTML)で実装できるようになります。

ということで、3D画像のサンプルを新旧織り交ぜていくつか紹介します。いずれもhacks.mozilla.orgに掲載されているもので、Google Chrome/Safari/Firefox10以上であれば正常に動作すると思います。

1.Fun with 3D rollovers

「Fun with 3D rollovers」は、MDNのロゴにマウスをポイントすると、MDNのロゴとその裏に隠れているHTML5のロゴが回転します。

Fun with 3D rollovers
Fun with 3D rollovers

2.3D CSS Tester

「3D CSS Tester」はCSSのパラメータを変更できるようになっており、変更することでリアルタイムに動作が変わります。

3D CSS Tester
3D CSS Tester

上記のブラウザを使っていない方は以下のYouTubeでお楽しみください。

3.3D HTML5 LOGO

「3D HTML5 LOGO」は回転するHTML5のロゴと、そのパラメータを変更できるようになっています。

3D HTML5 LOGO
3D HTML5 LOGO

4.Poster Circle

「Poster Circle」は円錐状の3つのリングが回転しながら全体が回るサンプルです。

Poster Circle
Poster Circle

5.Browser Memory

「Browser Memory」はいわゆる神経衰弱ゲームになっていて、HTML5のロゴを2枚クリックして、同じマークのブラウザロゴを当てていきます。ロゴが一致しなかったら自動的に元に戻ります。

Browser Memory
Browser Memory

ということでお楽しみください。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)