只有一个图标,比如朝左或者朝右的三角形,又不想去重新做个图标,怎么让它的朝向变换个方向呢,那就考虑使用CSS3中的旋转,如下:
1. css3之旋转新属性
transform: rotate(旋转的角度);
1.2 举个栗子:
<style>
.triangle {
transform: rotate(180deg);
}
</style>
解析:
- 给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); // 火狐
}