CSS3 变换：旋转；在 IE9 中

Posted

技术标签:

【中文标题】CSS3 变换：旋转；在 IE9 中【英文标题】：CSS3 transform: rotate; in IE9 【发布时间】：2011-06-19 09:46:00 【问题描述】：

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

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

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

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

非常感谢您的帮助！

W.

【问题讨论】：

【参考方案1】：

标准 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 的黑客，它与问题相关，可能会使事情变得更容易。

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

-sand-transform: rotate(10deg);

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

【讨论】：

谢谢斯普德！我现在要检查一下，然后再回复你。简直不敢相信网上关于这个的文档这么少。 @Spudley 你能发布一个来源吗？我在 MSDN 上找不到 msdn.microsoft.com/en-us/library/ms531207(v=vs.85).aspx @Šime Vidas 和@pagewil - 你是对的，没有太多的文档。我发现它记录在这里：css3please.com，但我应该注意，当我尝试使用旋转属性时，此页面使我的 IE9 预览副本崩溃。但是，我自己的独立测试已经确认该属性确实有效，供应商前缀正如我在回答中引用的那样。 （考虑到崩溃，我想它仍然存在错误！） 我真的不明白为什么旋转需要供应商前缀，当它们与 CSS3 的其余部分成为标准时 @Eduardo - 可能是因为标准尚未最终确定？【参考方案2】：

试试这个

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

【讨论】：

我用 ie9、FireFox、Chrome、Safari 试试这个代码，它可以工作【参考方案3】：

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

【讨论】：

在 ie 中按 f12 并选择将浏览器模式更改为 ie-9，然后检查这是否可行... 要让 IE9 使用竖排文本，您必须关闭 quirks 模式，将以下内容用作文件的前两行：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; 任何有效的文档类型都应该禁用怪癖模式，例如：。浏览器模式默认应为 IE9，除非您更改了设置。【参考方案4】：

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

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

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

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

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

【讨论】：

请致电-ms-transform-origin；这让我摸不着头脑。【参考方案5】：

可以使用：

 element.style['-ms-transform']='translate...'

【讨论】：

为什么你更喜欢这个而不是接受的答案？关于这一点，接受的答案还提供了一个很好的例子，说明 Stack Overflow 上最有用和最及时的答案所具有的详细程度和解释；这是值得努力的事情。

以上是关于CSS3 变换：旋转；在 IE9 中的主要内容，如果未能解决你的问题，请参考以下文章

变换上的 CSS3 动画：旋转。获取旋转元素当前度数的方法？

为变换创建一个跨浏览器混合：旋转

CSS3 2D Transform

HTML5-CSS3-JavaScript

Transform 详细讲解

没学过线代也能读懂的CSS3 matrix