我正在使用 JavaScript 构建一个模拟时钟,我知道如果使用 jQuery 会容易得多,但这里不提供此选项。
在 Chrome 和 Safari(即 webkit 浏览器)中一切正常,但在其他浏览器中则不然。
这是我的勾选方法,基本上它根据时间旋转图像。
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);"
);
}
有什么建议可以让它发挥作用吗?
最佳答案
您尚未对 -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 的来源如何做到这一点
关于javascript - 如何使用 javascript 使旋转图像跨浏览器工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8253951/