CSS3之旋转

只有一个图标，比如朝左或者朝右的三角形，又不想去重新做个图标，怎么让它的朝向变换个方向呢，那就考虑使用CSS3中的旋转，如下：

1. css3之旋转新属性

transform: rotate(旋转的角度)；

1.2 举个栗子：

解析：

• 给class为triangle的元素，旋转180；
• 其中 180deg 是指元素旋转的角度，单位是deg；

1.3 deg(度)是CSS3 的角度单位

度 ：全称（Degress），简写deg；

• 一个圆有360度；

• 度与弧度的转换关系：
  90deg = 100grad(梯度) = 0.25turn ≈ 1.570796326794897rad（弧度）

1.4 deg的兼容性

1.5 旋转的方向

通过 rotate() 方法，元素将旋转指定的角度：

• 角度为正值，顺时针旋转给定的角度；
• 如果值为负值，元素将逆时针旋转。

2. 不得不考虑的兼容问题

2.1 浏览器的私有前缀

• Chrome 和 Safari 的私有前缀是 -webkit- ;
• IE9（微软） 的私有前缀是 -ms- ;
• Opera 的私有前缀是 -o- ;
• Firefox 的私有前缀是 -moz- ;

2.2 兼容浏览器的写法如下：

.triangle {
        transform: rotate(180deg);
       -webkit-transform: rotate(180deg); // 谷歌、苹果
       -ms-transform: rotate(180deg);     // IE
       -o-transform: rotate(180deg);       // 欧朋
       -moz-transform: rotate(180deg);  // 火狐
}