javascript - 如何使用javascript使旋转图像跨浏览器工作

Question

我正在使用 JavaScript 构建模拟时钟，我知道如果我使用 jQuery 来构建它会容易得多，但这里不是一个选项。

在 Chrome 和 Safari(即 webkit 浏览器)中一切正常，但在其他任何浏览器中均无效。

这是我的 tick 方法，基本上它根据时间旋转图像。

function tick(deg, elmt){
document.getElementById(elmt).setAttribute(
        "style", "transform:rotate(" + deg + "deg);"
      + "-moz-transform: (" + deg + "deg);"
      + "-o-transform: (" + deg + "deg);"
      + "-webkit-transform:rotate(" + deg + "deg);"
      + "filter:progid:DXImageTransform.Microsoft.BasicImage(" + deg + "deg);"
    ); 
}

有什么建议可以让它发挥作用吗？

Answer 1

您还没有为 -moz- 和 -o- 属性使用 rotate，rotation 在IE语法

function tick(deg, elmt){
document.getElementById(elmt).setAttribute(
        "style", "transform:rotate(" + deg + "deg);"
      + "-moz-transform: rotate(" + deg + "deg);"
      + "-o-transform: rotate(" + deg + "deg);"
      + "-webkit-transform:rotate(" + deg + "deg);"
      + "-ms-transform:rotate("+ deg +"deg);"
    ); 
}

演示在 http://jsfiddle.net/gaby/fjHHX/3/

---

更新

更改了代码以支持 IE9 -ms- 扩展并删除了不允许任意旋转的 filter(仅 0、90、180 , 270 度)..

为了支持 IE 版本 8 及以下版本，您可以使用矩阵转换，但它变得很丑陋。请查看 http://css3please.com/ 处的 .box_rotate 部分
或查看 http://www.boogdesign.com/examples/transforms/matrix-calculator.html 的来源如何去做