CSS3 transform：rotate;在IE9中

我有一個元素需要在設計中處於垂直狀態。我已經得到了這個CSS在IE9以外的所有瀏覽器上工作。我用IE7 & IE8過濾器：CSS3 transform：rotate;在IE9中

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

然而，這似乎使我在IE9元素透明和CSS3「變換分析」 porperty似乎並沒有做任何事情！

有沒有人知道IE9中的旋轉元素？

真的很感謝幫助！

來源

2011-02-01 wilsonpage

134

標準CSS3旋轉應在IE9工作，但我相信你需要給它一個供應商名稱，像這樣：

-ms-transform: rotate(10deg);

這是可能的，它可能無法在正常工作測試版;如果沒有，請嘗試下載當前預覽版本（預覽版7），這是測試版的後期修訂版。我沒有測試版的測試版，所以我無法確認它是否在該版本中。最終發佈版本肯定會支持它。

我也可以確認在IE9中IE特定的filter屬性已經被丟棄。

[編輯]
人們要求進一步的文件。正如他們所說，這是相當有限的，但我確實找到了這個頁面：http://css3please.com/這對於在所有瀏覽器中測試各種CSS3功能非常有用。

但是在IE9預覽中測試這個頁面上的旋轉功能導致它崩潰得相當壯觀。

但我已經做了一些獨立的測試，在IE9中使用-ms-transform:rotate()在我自己的測試頁中，它工作正常。所以我的結論是該功能已經實現，但有一些錯誤，可能與動態設置有關。

用於哪些功能是在執行另外一個有用的參考點瀏覽器是www.canIuse.com - 見http://caniuse.com/#search=rotation

[編輯]
回想起這個古老的答案，因爲我最近發現了一個黑客稱爲CSS Sandpaper這與問題相關並可能使事情變得更容易。

黑客實現了對舊版本IE的標準CSS transform的支持。所以，現在你可以添加以下到你的CSS：

-sand-transform: rotate(10deg);

...並已在IE 6/7/8工作，而無需使用filter語法。（當然它仍然使用幕後的過濾器語法，但這使得管理起來更容易，因爲它使用與其他瀏覽器類似的語法）

來源

2011-02-01 16:38:36 Spudley

感謝Spud！我現在要檢查一下，然後回到你身邊。簡直不敢相信這裏有多少關於這個在線的文檔。 – wilsonpage 2011-02-01 16:45:22

@Spudley你能發表一個消息嗎？我無法在MSDN上找到http://msdn.microsoft.com/en-us/library/ms531207(v=vs.85).aspx – 2011-02-01 16:57:09

@ŠimeVidas和@pagewil - 你是對的，沒有太多周圍的文檔。我發現它記錄在這裏：http://css3please.com/，但我應該注意，當我嘗試使用rotate屬性時，此頁面崩潰了我的IE9預覽副本。但是，我自己的獨立測試已經證實該屬性確實有效，並且在我的答案中引用了供應商前綴。（鑑於崩潰，我認爲它仍然存在錯誤！） – Spudley 2011-02-01 17:22:46

我也有在IE9轉換的問題，我用-ms-transform: rotate(10deg)，它didn沒有工作。盡我所能，但問題是瀏覽器模式，爲了使轉換工作，您需要將兼容模式設置爲「標準IE9」。

來源

2012-06-11 10:58:57

試試這個

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
body { 
    margin-left: 50px; 
    margin-top: 50px; 
    margin-right: 50px; 
    margin-bottom: 50px; 
} 
.rotate { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    -webkit-transform: rotate(-10deg); 
    -moz-transform: rotate(-10deg); 
    -o-transform: rotate(-10deg); 
    -ms-transform: rotate(-10deg); 
    -sand-transform: rotate(10deg); 
    display: block; 
    position: fixed; 
} 
</style> 
</head> 

<body> 
<div class="rotate">Alpesh</div> 
</body> 
</html>

來源

2013-04-01 05:06:28

我知道這是老了，但我有同樣的問題，發現這個職位，雖然它沒有解釋究竟什麼是錯的，它幫助我正確的答案 - 希望我的回答可以幫助其他可能與我有類似問題的人。

我有一個我想旋轉垂直的元素，所以自然我添加了過濾器：對於IE8，然後是IE9的-ms-transform屬性。我發現，具有-ms-transform屬性並將濾鏡應用於相同的元素會導致IE9渲染元素的效果很差。我的解決辦法：

如果您使用的是變換origin屬性，添加一個用於MS太（-MS-變換產地：左下角）。如果你沒有看到你的元素，它可能是它在中軸上旋轉，從而以某種方式離開頁面 - 所以仔細檢查一下。
將IE7 & 8的過濾器屬性移動到單獨的樣式表中，並使用IE條件爲IE9以下的瀏覽器插入該樣式表。這樣它不會影響IE9風格，所有應該工作正常。
確保使用正確的DOCTYPE標籤;如果你有錯誤的IE9將無法正常工作。

來源

2014-09-02 19:42:59 Steve

CSS3 transform：rotate;在IE9中

回答

相關問題