css3动画属性系列之transform细讲旋转rotate

1、语法：

transform: none | <transform-function> [<transform-function>]*

2、取值：

none ----不进行变化

<transform-function> ----一个或多个变换函数，以空格分开

可以用于内联元素和块级元素，可以实现旋转、缩放、移动等等效果。具体如下：

rotate ---旋转

Java代码


/*

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

}