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

デモページ
イメージとしては、画像を縦に100分割して、CSSスプライトみたいにして画像を分割させます。
あとはアニメーションさせるというハックによって実現させてるようです。
CSS3の機能が拡張されて、今後、あっと驚くようなハックもどんどん出てくるんでしょうね。
関連エントリ
CSS3の3Dトランスフォームを使って螺旋状に画像をアニメーションさせるサンプル。
スクリプトを使わず、3Dトランスフォームだけで次のようにアニメーションさせてるようです。
JSだけでやるのでも大変そうな処理ですが、CSSで出来ちゃうっていうのがすごいですね

デモページ
イメージとしては、画像を縦に100分割して、CSSスプライトみたいにして画像を分割させます。
あとはアニメーションさせるというハックによって実現させてるようです。
CSS3の機能が拡張されて、今後、あっと驚くようなハックもどんどん出てくるんでしょうね。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- マウス位置に反応して画像がバラバラひろがる「Image Trail Effects」
- テーブルを検索・ソート・ページ分けができる「jquery.fancyTable」
- タイプライターアニメーション「type-this」
- すぐ隠れてくれるヘッダー実装「shyheader」
- 画像を円形でくり抜くためのUIを実装する「Cropme」
- スクロールで画像や文字がいい感じに拡大縮小されていくデモ「Smooth Scrolling Image Effects」
- あえてダサくして自分で1からデザインできる軽量なポップアップ「Uglipop」
- JSで楽譜を描画して再生までできる「abcjs」
- ページ内の画像をスムーススクロールするデモ
- Emailのドメイン部分のみオートコンプリートしてくれるjQuery「email-autocomplete」
- 過去のエントリ