CSS3变换：旋转;在IE9中
[英]CSS3 transform: rotate; in IE9
问题描述
在我所做的设计中，我有一个需要垂直的元素。 我有这个css在IE9以外的所有浏览器中工作。 我使用了IE7和IE8的过滤器：
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
然而，这似乎在IE9中使我的元素透明，并且CSS3'tranform'属性似乎没有做任何事情！
有谁知道IE9中的旋转元素？
真的很感激帮助！
W.
4 个解决方案
解决方案1
137 已采纳 2011-02-01 16:38:36
标准CSS3旋转应该在IE9中工作，但我相信你需要给它一个供应商前缀，如下所示：
-ms-transform: rotate(10deg);
它有可能在测试版中不起作用; 如果没有，请尝试下载当前预览版本（预览版7），这是测试版的后续版本。 我没有要测试的beta版本，因此我无法确认它是否在该版本中。 最终版本肯定会支持它。
我还可以确认IE9中已删除IE特定的filter属性。
[编辑]
人们要求提供一些进一步的文件。 正如他们所说，这是非常有限的，但我确实找到了这个页面： http ： //css3please.com/ ，这对于测试所有浏览器中的各种CSS3功能非常有用。
但是在IE9预览版中测试此页面上的旋转功能会导致它崩溃得相当惊人。
但是我在我自己的测试页面中使用IE9中的-ms-transform:rotate()进行了一些独立的测试，并且它运行正常。 所以我的结论是该功能已实现，但有一些错误，可能与动态设置有关。
另一个有用的参考点，其中的功能是在哪些浏览器中实现的www.canIuse.com - 请参阅http://caniuse.com/#search=rotation
[编辑]
恢复这个旧的答案，因为我最近发现了一个名为CSS Sandpaper的黑客，它与问题相关并可能使事情变得更容易。
对于旧版本的IE，hack实现了对标准CSS transform支持。 所以现在你可以在CSS中添加以下内容：
-sand-transform: rotate(10deg);
...并使其在IE 6/7/8中工作，而无需使用filter语法。 （当然它仍然在幕后使用过滤器语法，但这使得它更容易管理，因为它使用与其他浏览器类似的语法）
解决方案2
5 2013-04-01 05:06:28
试试这个
<!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>
解决方案3
4 2012-06-11 10:58:57
我在IE9中也遇到了转换问题，我使用-ms-transform: rotate(10deg)并且它不起作用。 尝试了我能做的一切，但问题是在浏览器模式下，为了使转换工作，你需要将兼容模式设置为“标准IE9”。
解决方案4
3 2014-09-02 19:42:59
我知道这已经过时了，但是我遇到了同样的问题，找到了这个帖子，虽然它没有解释到底是什么问题，但它帮助我找到了正确的答案 - 所以希望我的回答可以帮助其他人我的类似问题。
我有一个我想要旋转垂直的元素，所以我自然添加了过滤器：对于IE8，然后是IE9的-ms-transform属性。 我发现有-ms-transform属性和应用于同一元素的过滤器会导致IE9渲染元素非常差。 我的解决方案
如果您正在使用transform-origin属性，请为MS添加一个（-ms-transform-origin：left bottom;）。 如果你没有看到你的元素，它可能是它在它的中轴上旋转，从而以某种方式离开页面 - 所以仔细检查一下。
将IE7和8的filter：属性移动到单独的样式表，并使用IE条件为不到IE9的浏览器插入该样式表。 这样它不会影响IE9样式，所有都应该正常工作。
确保使用正确的DOCTYPE标签; 如果你错了IE9将无法正常工作。
CSS3“转换”属性在IE9中的工作方式不同
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.