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

how to make rotating image with javascript work across browsers

本文关键字：浏览器 工作 javascript 何使 旋转 图像      更新时间：2023-09-26

我正在用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);"
    ); 
}

有什么建议吗?

您没有将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度).

对于ie8及以下版本的支持，您可以使用矩阵变换，但它会变得难看。参见http://css3please.com/
章节.box_rotate或者查看http://www.boogdesign.com/examples/transforms/matrix-calculator.html的源代码了解如何操作

相关文章：