标签：
css3的元素旋转功能非常强大，也非常吸引人，但是很多时候因为浏览器使用率的问题，我们必需要想办法兼容一些低版本的浏览器，特别是ie这朵奇葩。
想要实现元素旋转本来很简单的一个属性就能实现，那就是transform:rotate(xxdeg)。举个例子：实现一个层旋转270deg。
#demo{
width: 300px;height: 200px;background-color: #FF80C0;margin: 200px;
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-ms-transform:rotate(270deg);
-o-transform:rotate(270deg);
}
不过，为了兼容很用户依然还在使用的ie8以下版本的浏览器，我们不得不为他写上滤境代码：
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
加上以后，ie8等浏览器也实现了旋转，可是，当你在ie9下看的时候你会发现它的旋转角度并不是你想要的，这是为什么呢？因为ie9即支持-ms-transform:rotate(270deg)
又支持 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)，虽然支持了很多css3属性，但是他依然保留了对滤镜的支持，相当于旋转了两次，ie10以后不支持滤镜，所以不会出现这种现象！
那么要如果针对ie9做hack呢？方法有二：
方法一：使用ie独有的条件注释：
<!--[if lte IE 8]>
<style>
#demo{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
</style>
<![endif]-->
方法二：就是本文的主角:root（即根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>，扩展一点：
:root{width: 100%} 其实就相当于 html{width: 100%}，只是ie8- 的浏览器不支持 :root）
:root #demo{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);}
因为ie8以下的版本不支持：root,所以就:root结合滤镜组合起来就实现的ie9 hack了。
PS：对于元素旋转还有更精确的工具，可以实现不同角度的旋转，包括ie8-，现在附上地址：http://www.useragentman.com/IETransformsTranslator/
标签：
原文地址：http://www.cnblogs.com/garfieldzhong/p/4655347.html
