CSS3转换：旋转；在IE9中

Question 1

在我完成的设计中，我有一个需要垂直的元素。我已经获得了CSS才能在除IE9之外的所有浏览器中工作。我将过滤器用于IE7和IE8：

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

但是，这似乎使我的元素在IE9中变得透明，而CSS3的“变形”功能似乎无能为力！

有人知道IE9中的旋转元素吗？

非常感谢您的帮助！

W.

Question 2

标准CSS3旋转应在IE9中工作，但我相信您需要为其指定供应商前缀，如下所示：

  -ms-transform: rotate(10deg);

它可能无法在Beta版本中工作；如果不是，请尝试下载当前的预览版本（预览版7），它是beta版的更高版本。我没有要测试的Beta版本，因此我无法确认它是否在该版本中。最终版本肯定会支持它。

我还可以确认filterIE9中已删除了IE特定的属性。

[编辑]
人们要求提供更多文档。正如他们所说，这是非常有限的，但是我确实找到了此页面：http : //css3please.com/，该页面可用于在所有浏览器中测试各种CSS3功能。

但是在IE9预览版中测试此页面上的旋转功能会导致其崩溃。

但是，我已经-ms-transform:rotate()在自己的测试页中使用IE9进行了一些独立的测试，并且工作正常。因此，我的结论是该功能已实现，但存在一些错误，可能与动态设置有关。

在浏览器中实现功能的另一个有用参考点是www.canIuse.com-请参阅http://caniuse.com/#search=rotation

[编辑]
恢复旧的答案是因为我最近发现了一个名为CSS Sandpaper的黑客，该黑客与该问题有关，可能使事情变得更容易。

黑客transform为IE的旧版本实现了对标准CSS的支持。因此，现在您可以将以下内容添加到CSS中：

-sand-transform: rotate(10deg);

...并使它可以在IE 6/7/8中工作，而无需使用filter语法。（当然，它仍然在后台使用过滤器语法，但这使它易于管理，因为它使用的语法与其他浏览器类似）

Question 3

试试这个

<!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>

Question 4

我曾经用过IE9的转换问题，-ms-transform: rotate(10deg)但没有用。尽我所能，但是问题出在浏览器模式下，要使转换生效，您需要将兼容模式设置为“ Standard IE9”。

Question 5

我知道这很老了，但是我遇到了同样的问题，找到了这篇文章，虽然它没有确切解释出什么问题，但它帮助我找到了正确的答案-因此希望我的答案可以帮助其他可能遇到问题的人与我类似的问题。

我有一个想要垂直旋转的元素，所以自然地我添加了过滤器：对于IE8，然后是-ms-transform属性，对于IE9。我发现，具有-ms-transform属性并且将过滤器应用于同一元素会导致IE9将该元素呈现得很差。我的解决方案：

如果您使用的是transform-origin属性，则也为MS添加一个属性（-ms-transform-origin：左下；）。如果您看不到元素，则可能是它在中轴上旋转，因此以某种方式离开了页面-因此请仔细检查。
将IE7＆8的filter：属性移动到单独的样式表，并使用IE条件将样式表插入小于IE9的浏览器。这样，它不会影响IE9样式，并且一切正常。
确保也使用正确的DOCTYPE标记；如果您输入错误，IE9将无法正常工作。