強火で進め

このブログではプログラム関連の記事を中心に書いてます。こちらで( http://blog.livedoor.jp/tsuyobi-outdoor/ ) アウトドア関連の記事も書いてます。

CSS 3D TransformsとCSS Animationsでフォト蔵の写真をぐるぐる


「第 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を使用していますのでこちらに対応しているSafariChromeなどのブラウザ以外では正しく表示されません。

SafariChromeこちらにアクセスして下さい。

ちなみにMac上でSafariChromeで動作させた場合はSafariの方がかなり高速に動作しました。