javascript - CSS/JS 时钟：IE8 中奇怪的定位行为

Question

我正在尝试在不使用任何图像的情况下制作动画时钟。我设法做对了大部分。但是，当其中一只指针到达 12 时，它会一直跳到表盘底部，然后逐渐向上移动并到达正确的位置，因为它指向 3。这只发生在 IE8 中。知道如何解决这个问题吗？

这是 HTML 文件：https ://dl.dropboxusercontent.com/u/39330021/Test/CSS3-JS-Clock-3.htm

显示问题的屏幕截图：

Answer 1

我猜你正在使用带有 IE8 矩阵过滤器的 CSS3 旋转作为后备。MS 矩阵过滤器的工作方式有点不同：旋转元素的边界框得到扩展，并且比旋转前占据更多位置。因为边界框的锚点在左上角，所以图像（或其他内容）会向下和向右移动以进行正确的变换。您需要通过水平和垂直移动盒子来补偿这种移动。不是那么容易的任务。

静态处理：
互联网上有一些资源可以帮助您使用静态示例：

• IETransformsTranslator
• 在 IE 中更正变换原点

动态处理：
为了你的动态目的，如果你真的真的需要支持 IE8，我推荐 GSAP，这是著名的 Greensock 从 ActionScript 3 到 JS 的库端口。我知道它正在补偿变换原点，并且在 IE8 中具有兼容的旋转解决方案：

GSAP Animation Library

Answer 2

好吧，我自己想通了。什么时候angle成270，IE就做到了-90。所以我只是添加了一行以添加360到angle它是否小于0.