个回答

• 跑跑佳

  2015-04-19 17:40:37

  已采纳

  Hi，@Zhong_Yuan 同学你好：

  秒针的方向和表盘刻度没对齐，是因为刻度的CSS样式有问题，在旋转时对Y轴上的位置进行了重复设置。

  以小时的刻度为例（分钟刻度的类似）：

  （1）在JS中绘制小时刻度时，设置了内联样式 style="transform:rotate(0deg) translate(80px,-50%)"

  其中，translate(80px,-50%) 设置了刻度本身在Y轴方向上以其中心位置垂直居中。

  （2）但同时在CSS中又设置了

  .line-hour li, .line-min li {

    transform-origin: left center;  // 设置了基点在Y轴方向上是center（即以Y轴刻度的中心位置处旋转）

  }

  此时（1）和（2）同时对Y轴上的位置进行了设置，重复了。导致刻度的绘制有偏差。

  
  

  解决办法：

  将（2）中的基点设置为刻度的左上角，即 transform-origin: 0 0; 

  Y轴上垂直居中就交由（1）translate(80px,-50%)中的 translateY(-50%) 去设定。

  修改后的效果见 http://codepen.io/anjia/pen/KwEzwQ

  
  

  说明：

  保留（1）是考虑到当表盘静止时（即注释掉 move();）指针依然能和刻度保持垂直对齐。

  1

• 我是陈东东

  2015-04-13 19:43:23

  秒针+角度就可以啦

  0