Quantcast
Channel: 小粋空間
Viewing all articles
Browse latest Browse all 219

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

$
0
0


昨日の「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

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


Viewing all articles
Browse latest Browse all 219

Trending Articles