css3卡通属性系列之transform细讲旋转rotate
日期：2014-05-17 浏览次数：20712 次
css3动画属性系列之transform细讲旋转rotate
1、语法：
?
??transform: none | ?<transform-function> [<transform-function>]*
?
?
2、取值：
?
- none ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?----不进行变化
- <transform-function> ? ? ? ? ----一个或多个变换函数，以空格分开
可以用于内联元素和块级元素，可以实现旋转、缩放、移动等等效果。具体如下：
- rotate ---旋转
/*
rotate(<angle>)
通过指定的角度对元素指定一个2D旋转
需要先有一个transform-origin属性的定义
transform-origin是旋转的基点
angle是旋转的角度，正值表示顺时针，负值表示逆时针
deg为度的意思，如60deg表示60度
*/
#test{
transform:rotate(60deg); //w3c标准
-webkit-transform:rotate(60deg); //webkit内核的safari和chrome
-moz-transform:rotate(60deg); //ff
-o-transform:rotate(60deg); //opera
-ms-transform:rotate(60deg); //IE9
}
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
