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/

伪类选择器:root的妙用的更多相关文章

  1. 【CSS3】---结构性伪类选择器-root+not+empty+target

    结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...

  2. CSS3中结构伪类选择器——root、not、empty、target选择器

    1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="t ...

  3. h5与c3权威指南笔记--css3结构性伪类选择器root，not，empty，target

    root:将样式绑定到根元素(html中的根元素是<html></html>) 举个栗子 :root{ background-color: yellow; } body{ ba ...

  4. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  5. Svg和canvas的区别，伪类选择器有哪些（归类）

    区别一:svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改.canvas输出的是一整幅画布: 区别二:svg输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会是 ...

  6. CSS3之伪元素选择器和伪类选择器

    伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

  7. CSS3 结构性伪类选择器（1）

    1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...

  8. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. CSS3 结构伪类选择器 详解

    1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...

随机推荐

  1. leetcode 238 Product of Array Except Self

    这题看似简单,不过两个要求很有意思: 1.不准用除法:最开始我想到的做法是全部乘起来,一项项除,可是中间要是有个0,这做法死得很惨. 2.空间复杂度O(1):题目说明了返回的那个数组不算进复杂度分析里 ...

  2. 计算机网络及TCP/IP知识点（全面，慢慢看）

    TCP/IP网络知识点总结 一．总述 1.定义:计算机网络是一些互相连接的.自治的计算机的集合.因特网是网络的网络. 2.分类: 根据作用范围分类: 广域网 WAN (Wide Area Networ ...

  3. 又见蒙特卡洛——python模拟解决三门问题

    三门问题很有意思,wiki用不同方法将原理讲的很透彻了,我跟喜欢其中这种理解方式:无论参赛者开始的选择如何,在被主持人问到是否更换时都选择更换.如果参赛者先选中山羊,换之后百分之百赢:如果参赛者先选中 ...

  4. Unity3D ShaderLab 漫反射卷积光照模型

    Unity3D ShaderLab 漫反射卷积光照模型 漫反射卷积[Diffuse convolution]是一个模糊立方体的过程,它保留了立方图的整体光照强度,只模糊了细节. 这种效果在我们要活得一 ...

  5. Inno如何在安装完成时删除指定的文件夹(下的所有文件及子目录)??

    删除安装目录下的任意文件夹及下的所有文件及子目录,或者删除指定目录的文件夹,要如何做到呢?谢谢!! //删除文件    用 DeleteFile 只能删除一个文件,不能使用通配符来删除多个文件Dele ...

  6. Apache 中 .htaccess 文件设置技巧16则

    .htaccess 文件 (Hypertext Access file) 是Apache Web服务器的一个非常强大的配置文件,对于这个文件,Apache有一堆参数可以让你配置出几乎随心所欲的功能.. ...

  7. hdu 5206 Four Inages Strategy

    题目大意: 判断空间上4个点是否形成一个正方形 分析: 标称思想 : 在p2,p3,p4中枚举两个点作为p1的邻点,不妨设为pi,pj,然后判断p1pi与p1pj是否相等.互相垂直,然后由向量法,最后 ...

  8. ZOJ Problem Set - 3329 One Person Game

    题目大意:有三个骰子,分别有k1,k2,k3个面. 每次掷骰子,如果三个面分别为a,b,c则分数置0,否则加上三个骰子的分数之和. 当分数大于n时结束.求游戏的期望步数.初始分数为0分析  设 E[i ...

  9. UI学习笔记---第十二天UITabBarController

    页签视图控制器-UITabBarController   自定义UITabBar     block高级 一.UITabBarController 结构为三层:Tab bar controller v ...

  10. Codeforces Round #373 (Div. 2) A B C 水 贪心 模拟(四舍五入进位)

    A. Vitya in the Countryside time limit per test 1 second memory limit per test 256 megabytes input s ...