如何使用 CSS3 Transform 旋转 IE9 中的元素？

IE9 中的 CSS3 变换：旋转

本文旨在解决在 IE9 中旋转元素的问题。

问题

在设计中，我们需要一个垂直元素。虽然 CSS 在所有浏览器中都能正常工作，但 IE9 除外。我们在 IE7 和 IE8 中使用了 filter 属性：

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

然而，这会导致元素在 IE9 中变为透明，CSS3 的“变换”属性似乎没有任何作用！

答案

标准的 CSS3 旋转应该可以在 IE9 中使用，但我们认为需要添加供应商前缀，如下所示：

-ms-transform: rotate(10deg);

它可能无法在测试版中使用；如果不是，请尝试下载当前预览版（预览 7），这是比测试版更新的版本。我们没有测试版的测试版本，因此无法确认它是否在该版本中。最终版本绝对会被计划支持它。

我们还可以确认 IE9 中已经删除了 IE 特定的 filter 属性。

进一步的文档

据说这是非常有限的，但我们确实找到了这个页面：http://css3please.com/，它对于在所有浏览器中测试各种 CSS3 功能很有用。

但在 IE9 预览中测试此页面上的旋转功能会导致它崩溃得很惨烈。

然而，我们在自己的测试页面中对 -ms-transform:rotate() 在 IE9 中进行了独立测试，并且它工作得很好。因此，我们的结论是该功能已经实现，但有一些错误，可能与动态设置有关。

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

最近更新

重新给出这个旧答案，因为我们最近了解到了一种名为 CSS Sandpaper 的破解方法，它与问题有关，可能会让事情变得更简单。

该破解方法为旧版本的 IE 实施了对标准 CSS 变换的支持。因此，现在可以将以下内容添加到你的 CSS 中：

-sand-transform: rotate(10deg);

...并且让它在 IE 6/7/8 中工作，而无需使用 filter 语法。（当然，它仍然在幕后使用 filter 语法，但这通过使用类似于其他浏览器语法的语法的处理，变得更加容易。）

以上是如何使用 CSS3 Transform 旋转 IE9 中的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！