前の記事 ≪:2010年1月28日 管理人のブックマーク
次の記事 ≫:すっきり綺麗なWEBに使えそうなアイコンセット「Shine」

横スクロールするとコカコーラの缶がクルクル回転するPureCSSなサンプル

2010年01月29日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Romn Corts Pure CSS Coke Can

横スクロールするとコカコーラの缶がクルクル回転するPureCSSなサンプル。
横のスクロールを移動させるとコーラの缶がクルクルとなめらかに回転するJavaScriptを一切使わないテクニックです。
我こそはCSSマスターという方は押さえておくとよいかも。

CSSで回転する図1

スクロールすることでコークの缶がクルクル面白く回転します。

CSSで回転する図2

JS使っても大変そうなものですが、CSSだけでやってるというのが凄いですね。
動作ブラウザはIE8, Firefox 3以降, Chrome 3, Safari 4, Opera 10 だそうです。
スポンサード リンク

By.KJ : 2010年01月29日 09:06 livedoor Readerで購読 Twitterに投稿

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