Question

我通过Stackoverflow找到了这么多代码，可以在鼠标移动时旋转图片。

var img = $('.image');
if(img.length > 0){
var offset = img.offset();
function mouse(evt){
    var center_x = (offset.left) + (img.width()/2);
    var center_y = (offset.top) + (img.height()/2);
    var mouse_x = evt.pageX; var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90; 
    img.css('-moz-transform', 'rotate('+degree+'deg)');
    img.css('-webkit-transform', 'rotate('+degree+'deg)');
    img.css('-o-transform', 'rotate('+degree+'deg)');
    img.css('-ms-transform', 'rotate('+degree+'deg)');
}
$(document).mousemove(mouse);
}

在Firefox和Chrome上运行良好但不幸的是，它在IE 10中无效

这是一个小提琴（我刚刚更改了图片）：http://jsfiddle.net/22Feh/225/

知道怎么解决吗？或者我应该克服它不起作用的事实？

感谢。

Answer 1

IE10不需要-ms-的{{1}}前缀。 IE10预览需要它，但不是IE10的最终版本。

因此，答案只是删除您一直使用的transform前缀，并设置基本-ms-样式：

transform

无论如何你应该这样做 - 即使是使用前缀的浏览器也应该在标准的无前缀版本建立后删除对它们的支持，所以你应该总是指定样式的无前缀版本，无论你在哪里使用前缀。

这里的工作示例：http://jsfiddle.net/22Feh/225/

Answer 2

也许你需要这个img.css('transform', 'rotate(' + degree + 'deg)');

如果你看这里http://caniuse.com/transforms2d IE10不需要前缀。我不确定它是否接受前缀，但值得一试

图像在IE10中的鼠标移动时旋转

2 个答案: