「第 0 回 HTML5 プログラミング&クリエイティブ・コンテスト」に応募したけど選ばれなかった作品を公開します。
「第 0 回 HTML5 プログラミング&クリエイティブ・コンテスト」のお知らせ - Google Japan Developer Relations Blog
http://googledevjp.blogspot.com/2011/01/0-html5.html
CSS 3D TransformsとCSS Animationsを使って写真をぐるぐる回しています。
CSS 3D Transforms Module Level 3
http://www.w3.org/TR/css3-3d-transforms/
CSS Animations Module Level 3
http://www.w3.org/TR/css3-animations/
立体的に表現になっていますがCSS 3D Transformsにより実装しており、WebGLは使用していません。
ここのプログラムはWebKitのブログで公開されていた「Poster Circle」をベースに作成しました。
Surfin' Safari - Blog Archive » 3D Transforms
http://www.webkit.org/blog/386/3d-transforms/
写真はフォト蔵APIを使ってクリエイティブ・コモンズで公開されている写真を表示しています。画像をクリックすると公開されているページへジャンプします。
使用している画像ファイルはこのフォト蔵API経由で取得している画像のみでそれ以外には一切の画像ファイルは使用していません。
角丸などの処理もマスク画像などで行っているのでは無く、CSSにて実装しています。
なお、CSS 3D TransformsとCSS Animationsを使用していますのでこちらに対応しているSafariやChromeなどのブラウザ以外では正しく表示されません。