TopCSS > 2011年12月
2011年12月23日

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

December 23,2011 2:34 AM
Tag:[, ]
Permalink

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

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

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3