如何在Windows 8/IE10中90°旋轉HTML/Javascript中的圖像或對象？

以下面的代碼：如何在Windows 8/IE10中90°旋轉HTML/Javascript中的圖像或對象？

<html> 
    <body onload="x=0" onkeydown="document.images[0].style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation='+(x=++x%4)+')'"> 
    <img src="DSCF0353.jpg" height=900> 
</html>

爲什麼說這一點，這使得所顯示的圖像週期上的每個鍵擊90°旋轉在Windows 7/IE9，不會在Windows這樣做8/IE10（圖像不旋轉）？什麼代碼會在Windows 8/IE10中產生旋轉（如果可能的話，以上類似）？

來源

2013-01-10 Ron Obvious

ie10識別CSS3屬性。所以你可以使用旋轉css屬性來旋轉元素。 – Sandeep

查看dis http://stackoverflow.com/questions/7117445/html5-rotating-an-image-with-canvas – Anshu

@Sandeep IE9已經支持CSS3轉換，但微軟在IE10中放棄使用舊版過濾器。 – Licson

-1

使用jQuery rotate plugin這是準確的。

來源

2013-01-10 05:45:24 Roy

你不能用jQuery來回答所有的問題。 –

@SimonHiemstra你爲什麼認爲這不是解決方案？ – Roy

感謝您收到我的三個回覆。 Sandeep的參照CSS3 旋轉屬性似乎是最直接的解決方案，我也跟着上去就可以在這裏發現最簡單的答案：Rotating text with CSS3/HTML5讓我直接比較新舊方法，導致這個修改後的代碼：

<html> 
    <body onload="x=0" onkeydown="document.images[0].style.msTransform='rotate('+((x=++x%4)*90)+'deg)'"> 
    <img src="DSCF0353.jpg" height=900> 
</html>

這使我可以直接引用度數，而不是從基於Pi的Radians轉換。而且90度的增量很方便，但新方法（如其他建議）允許在其他角度，以及一個諺語帽子的下降。

在行爲的一個輕微的不同之處在於，在老方法中，圖像的左上角的物理位置作爲顯示是恆定的;在NEW方法中，當以0度旋轉顯示時圖像的CENTER的位置成爲圖像的旋轉中心。

另一個不同的方面是，可旋轉性要求圖像應用某種格式（在這種情況下，將高度設置爲900）;該要求不再適用。

附錄：說到定位，這讓我回到了這個有用的答案：How to apply multiple transforms in CSS?關於結合旋轉和重新定位（「翻譯」）。把旋轉（r）和翻譯（x，y）一個接一個在一個單一的行，由空間分隔。請注意，所述操作是爲了執行：

如果平移是首先，圖像是通過在它的原始方向的規定量（「PX」爲像素）移動，然後繞新的位置它的中心;

如果旋轉是第一，（如在所引用的頁）中的圖像被旋轉大約是其原始中心，然後通過量移位相對（旋轉）座標的旋轉後的圖像的系統中指定。

來源

2013-01-11 05:22:33

如何在Windows 8/IE10中90°旋轉HTML/Javascript中的圖像或對象？

回答

相關問題