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

您尚未将rotate用于-moz-和-o-属性，IE语法中的rotation

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的来源以了解如何操作

如何使用javascript在浏览器中创建旋转图像

1 个答案: