CSS3とjQueryで和時計

HTML

HTML部分は単純です。

<div id="wadokei">
  <ol>
    <li id="ne"><span>子</span></li>
    <li id="ushi"><span>丑</span></li>
    <li id="tora"><span>寅</span></li>
    <li id="u"><span>卯</span></li>
    <li id="tatsu"><span>辰</span></li>
    <li id="mi"><span>巳</span></li>
    <li id="uma"><span>午</span></li>
    <li id="hitsuji"><span>未</span></li>
    <li id="saru"><span>申</span></li>
    <li id="tori"><span>酉</span></li>
    <li id="inu"><span>戌</span></li>
    <li id="i"><span>亥</span></li>
  </ol>
</div>

CSS

Firefox, Chrome, Safari, Operaに対応するために、それぞれの指定を追加していきます。

/* 時計の外枠のボーダーと外枠の色 */
#wadokei {
  position: relative; /* :before :after の absolute 用 */
  margin: 0 auto;
  padding: 5px;
  border: 1px solid #666;
  border-radius: 166px;
  -moz-border-radius: 166px;
  -webkit-border-radius: 166px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  width: 322px;
  height: 322px;
  background-color: #222;
  font-family: serif;
}

/* 時計の針 */
#wadokei:before {
  display: block;
  position: absolute;
  top: 50px;
  left: 165px; /* 中心にくるように#wadokeiのwidthを考えながら調整する */
  z-index: 1; /* ないとみえなくなる */
  width: 2px;
  height: 111px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  background: #000;
  content: "";
}

/* 時計の針の根元。:beforeとほとんど同じ */
#wadokei:after {
  display: block;
  position: absolute;
  top: 161px;
  left: 161px;
  z-index: 2;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  width: 10px;
  height: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  background: #c00;
  content: "";
}

/* 時計の内側 */
#wadokei ol {
  position: relative; /* liがabsoluteになるので */
  margin: 0;
  padding: 0;
  border: 1px solid #999;
  border-radius: 160px;
  -moz-border-radius: 160px;
  -webkit-border-radius: 160px;
  list-style: none;
  width: 320px;
  height: 320px;
  background-color: #fff;
  background-image: -webkit-gradient(radial, center center, 20, center center, 150, from(#fff), color-stop(95%, #eaeaea), to(#e0e0e0));
}

/* 文字盤 */
#wadokei ol > li {
  position: absolute; /* リストを全部同じ場所に */
  top: 150px;
  left: 10px;
  width: 150px;
  font-size: 20px;
  transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -webkit-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
}

/* 各時刻の文字 */
#ne {
  transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

/*
  長いので省略。
  上と同じ指定を各文字に指定していく。
  1文字あたり30degをプラスする。
*/

/* 文字を回転させる */
#wadokei li > span {
  display: inline-block;
  transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -o-transform: rotate(270deg);
}

かなり長いですが、ほとんどは各ブラウザ用の指定ですね。
li要素をrotateするときの回転場所の基準はちゃんと指定しないとおかしなことになります。

文字を回転させる箇所ですが、liが回転していない時点では文字が上を向いているので、内側に向くようにrotateさせてやればいいだけです。

文字の位置は360を12で割って、30度ずつずらして配置します。

jQuery

時計を動かします。
このコードはCSS-Tricksを参考にしました。

Old School Clock with CSS3 and jQuery | CSS-Tricks

jQuery(function($) {

  setInterval( function() {
    var hours = new Date().getHours();
    var degree = hours * -15;
    var rotate = 'rotate(' + degree + 'deg)';
    $('#wadokei > ol').css({
      '-moz-transform': rotate,
      '-webkit-transform': rotate,
      '-o-transform': rotate
    });
  }, 1000);

});

時間を取得して、時間に-15をかけて、それをCSSに入れているだけです。
これを1秒おきに繰り返します。