前の記事 ≪:拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」
次の記事 ≫:2010年2月23日 管理人のブックマーク

CSSのrotationを使ったアナログ&デジタル時計実装例

2010年02月23日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Jon Combe | Code | HTML clocks using JavaScript and CSS rotation

次のような、CSSのrotationを使ったアナログ&デジタル時計実装例が公開されています。
Flashっぽいのですが、Flashは一切使っていません。

左のアナログ時計もいいのですが、右のデジタル時計も前後の分と秒が若干rotateされて表示されてるのがクールですね。



こういうことも出来るんだ、ということで一度見ておいてもよさそうです。

実装ですが、JavaScript によって次のようにCSSのrotateプロパティをsetIntervalで定期的にあてていってるだけのようです。

-webkit-transform: rotate(42deg);
-moz-transform: rotate(42deg);

このプロパティがなかったらかなり大変そうですが、これらが使えれば楽々というわけですね。

但し、IEでは動かない点に注意。
関連の記事検索:CSS, JavaScript, 時計
スポンサード リンク

By.KJ : 2010年02月23日 11:07 livedoor Readerで購読 Twitterに投稿

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