圖像在IE10中的mousemove上旋轉

我已經通過Stackoverflow發現了這一大段代碼，用於在鼠標移動時旋轉圖片。圖像在IE10中的mousemove上旋轉

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/

不知道如何解決它？或者我應該忽略它不起作用的事實？

謝謝。

來源

2013-07-18 Belinda

對於transform，IE10不需要前綴-ms-。 IE10預覽需要它，但不是IE10的最終發佈版本。

因此，答案是簡單地刪除-ms-前綴，你一直在使用，只是設置基本transform風格：

img.css('transform', 'rotate('+degree+'deg)');

你本來也應該這樣做 - 甚至使用前綴的瀏覽器一旦建立了標準的前置式版本，應該在以後刪除對它們的支持，所以你應該總是指定一個前置風格的前綴，無論你在哪裏使用前綴。

工作示例這裏：http://jsfiddle.net/22Feh/225/

來源

2013-07-18 10:50:34 Spudley

謝謝！現在工作正常 – Belinda

也許如果你看看這裏http://caniuse.com/transforms2d IE10不需要前綴，你需要這個img.css('transform', 'rotate(' + degree + 'deg)');

。我不確定它是否接受前綴，但值得一試

來源

2013-07-18 10:43:47 iConnor

這工作。 @ user2595109，在img.css（' - moz-transform'，'rotate（'+ degree +'deg）'）之前將此行添加到函數鼠標（evt）中;行 – AnaMaria

謝謝你的回答，我希望它會那麼簡單:) – Belinda

圖像在IE10中的mousemove上旋轉

回答

相關問題