77

在我所做的设计中，我有一个元素需要垂直。我已经得到了可以在除 IE9 之外的所有浏览器中使用的 css。我使用了 IE7 和 IE8 的过滤器：

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

然而，这似乎使我的元素在 IE9 中变得透明，并且 CSS3 '转换' 属性似乎没有做任何事情！

有谁知道 IE9 中的旋转元素？

真的很感谢帮助！

W。

4

5 回答 5

139

标准 CSS3 旋转应该在 IE9 中工作，但我相信你需要给它一个供应商前缀，如下所示：

  -ms-transform: rotate(10deg);

它可能无法在 beta 版本中运行；如果没有，请尝试下载当前的预览版（预览版 7），这是 beta 的更高版本。我没有要测试的 beta 版本，所以我无法确认它是否在那个版本中。最终版本肯定会支持它。

我还可以确认 IE 特定filter属性已在 IE9 中删除。

[编辑]
人们要求提供一些进一步的文件。正如他们所说，这是非常有限的，但我确实找到了这个页面：http ://css3please.com/这对于在所有浏览器中测试各种 CSS3 功能很有用。

但是在 IE9 预览版中测试此页面上的旋转功能导致它相当壮观地崩溃。

但是，我在自己的测试页面中使用 IE9 进行了一些独立测试-ms-transform:rotate()，并且运行良好。所以我的结论是该功能已实现，但有一些错误，可能与动态设置有关。

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

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

transformhack 实现了对旧版本 IE的标准 CSS 的支持。所以现在您可以将以下内容添加到您的 CSS 中：

-sand-transform: rotate(10deg);

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

于 2011-02-01T16:38:36.243 回答
5

试试这个

<!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-01T05:06:28.097 回答
4

我在 IE9 中的转换也有问题，我用过-ms-transform: rotate(10deg)，但它不起作用。尽我所能，但问题出在浏览器模式下，要进行转换，您需要将兼容模式设置为“标准 IE9”。

于 2012-06-11T10:58:57.537 回答
3

我知道这已经过时了，但我遇到了同样的问题，找到了这篇文章，虽然它没有准确解释问题所在，但它帮助我找到了正确的答案——所以希望我的回答能帮助其他可能有问题的人与我的类似问题。

我有一个想要垂直旋转的元素，所以很自然地我添加了过滤器：用于 IE8，然后添加了 IE9 的 -ms-transform 属性。我发现，将 -ms-transform 属性和过滤器应用于同一元素会导致 IE9 渲染该元素的效果非常差。我的解决方案：

  1. 如果您使用的是 transform-origin 属性，也请为 MS 添加一个（-ms-transform-origin: left bottom;）。如果你没有看到你的元素，可能是它在它的中轴上旋转，从而以某种方式离开了页面——所以仔细检查一下。

  2. 将 IE7 和 8 的 filter: 属性移动到单独的样式表中，并使用 IE 条件为低于 IE9 的浏览器插入该样式表。这样它就不会影响 IE9 样式并且一切都应该可以正常工作。

  3. 确保也使用正确的 DOCTYPE 标签；如果你弄错了 IE9 将无法正常工作。

于 2014-09-02T19:42:59.550 回答
0

可以使用：

 element.style['-ms-transform']='translate...'
于 2021-05-30T11:44:55.593 回答