CSSのrotationを使ったアナログ&デジタル時計実装例
2010年02月23日-
スポンサード リンク
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のrotationを使ったアナログ&デジタル時計実装例が公開されています。
Flashっぽいのですが、Flashは一切使っていません。
左のアナログ時計もいいのですが、右のデジタル時計も前後の分と秒が若干rotateされて表示されてるのがクールですね。

こういうことも出来るんだ、ということで一度見ておいてもよさそうです。
実装ですが、JavaScript によって次のようにCSSのrotateプロパティをsetIntervalで定期的にあてていってるだけのようです。
-webkit-transform: rotate(42deg);
-moz-transform: rotate(42deg);
このプロパティがなかったらかなり大変そうですが、これらが使えれば楽々というわけですね。
但し、IEでは動かない点に注意。
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- シンプルなタブUIを実現できる「Skeletabs」
- 過去のエントリ