前の記事 ≪:古いMySQLからMySQL5の最新版にアップグレードする際の文字化けを防ぐバ...
次の記事 ≫:DSブラウザでの動作をシュミレートできる「DSブラウザシミュレーター...

CSS3の3Dトランスフォームを使って螺旋状に画像をアニメーションさせるサンプル

2011年01月18日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Breathtaking animated CSS3 helix using 3d transforms

CSS3の3Dトランスフォームを使って螺旋状に画像をアニメーションさせるサンプル。
スクリプトを使わず、3Dトランスフォームだけで次のようにアニメーションさせてるようです。
JSだけでやるのでも大変そうな処理ですが、CSSで出来ちゃうっていうのがすごいですね


デモページ

イメージとしては、画像を縦に100分割して、CSSスプライトみたいにして画像を分割させます。
あとはアニメーションさせるというハックによって実現させてるようです。

CSS3の機能が拡張されて、今後、あっと驚くようなハックもどんどん出てくるんでしょうね。

関連エントリ
関連の記事検索:3D, 画像
スポンサード リンク

By.KJ : 2011年01月18日 10:08 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)