在纯CSS世界时钟中旋转秒针

Question

我有以下Pure CSS Clock：http://cssdeck.com/labs/wall-clock-in-pure-css3

我在CSS样式中添加了以下代码，允许我设置小时和分钟指针的位置：

body #clock .hh {
transform:rotate(352.5deg);
}

#clock .mm {
transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-ms-transform:rotate(270deg);
}

#clock .ss {
animation: tick 1s normal infinite steps(1000,end);
-webkit-animation: tick 1s normal infinite steps(1000,end);
}

这里有一个上面的CSS：https://jsfiddle.net/vhft4g3z/

这样可以正常工作，但我试图将相同的度数方法应用于秒.ss样式，如下所示：

#clock .ss {
transform:rotate(270deg);
animation: tick 1s normal infinite steps(1000,end);
-webkit-animation: tick 1s normal infinite steps(1000,end);
}

但不幸的是，似乎有些东西一直在压倒秒针。我知道.ss样式是有效的，因为如果我在.ss类中添加样式，它就会应用它。但是，它似乎没有应用旋转。

我是如何应用旋转来使秒数以给定的程度开始的？