damdom https://blog.hatena.ne.jp/damdom/ ハンドルネームの由来は乳製品好きから https://becolomochi.hatenablog.com/ AdventCalendar CSS3 jQuery CodePen はじめに この記事は CSS Advent Calendar 2017 4日目の記事です。 Webデザインの参考になるものを探しにギャラリーサイトを見ていたところ、以下のサイトを見つけました。 www.kotorinoyu.jp 現在時刻がアナログ時計風に表示されていることにかなり興味を持ちました。 自分でも作れるかも？と思い、CSS と jQuery で作ってみました。 概要 時間の針、分の針の div 要素を用意 JS で現在時刻を取得 時間と分の数値から角度を計算し transform 要素の rotate で角度をつける 秒針も作ってみた スムーズに回転するように transition… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fbecolomochi.hatenablog.com%2Fentry%2F2017adcale-css-clock" title="transformプロパティとjQueryでアナログ時計を作ってみた【CSS Advent Calendar 2017】4日目 - ハンドルネームの由来は乳製品好きから" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/d/damdom/20171203/20171203001854.png Hatena Blog https://hatena.blog 2017-12-04 00:00:00 rich https://becolomochi.hatenablog.com/entry/2017adcale-css-clock 1.0 100%