css3定义了可对元素进行变形和旋转，于是在闲暇的功夫做了一个时钟。此时钟的运行必须在高级浏览器，另如果要在ie10运行，必须给transform加上相应的前缀即可。

说说时钟的原理，根据时钟的时分秒针走动，我们可以得到：每个小时有30deg，每个刻度为6deg。秒针每走360deg ， 则分针走6deg ，时针走 0.5deg。其中秒针每秒走一次，而分钟位置可通过当前日期对象(假设为oDate)的getMinutes()来获得。那么时针的位置就可以由分钟来确定，即oDate.getMinutes/60*30 。

于是我们可以设置一个定时器timer，每一秒调用一次。

值得注意的是：css3定义0deg是在3点位置，而时针则是到12点位置，重新清0。于是我们就要判断，当某个针（无论时针，分针，秒针）到达12点的位置，即270deg，则下一秒将其设置为-90deg。这里我们拿秒针做例子：假设oS为当前秒数，nowS为秒针的度数，于是就有：

var nowS=parseInt(iS.style.transform.substring(7));

if (nowS === 270) {
  nowS=-90;
}

nowS = oS*6 - 90;

iS.style.transform="rotate(" + nowS + "deg)";

当然分针类似，而时钟则是由分针来确定，但是要注意每一个小时为30deg。假设oH为当前时数，nowH为时针的度数，oM为当前分数，于是就有：

nowH = oH*30 - 90 + Math.floor(oM/60*30);

具体的demo页面：基于css3的时钟