Html+CSS transform属性中的 rotate 属性值

1、语法：

 

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

 

 

2、取值：

 

• none                                  ----不进行变化
• <transform-function>         ----一个或多个变换函数，以空格分开

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

• rotate ---旋转

Java代码  

1. /* 
2.   rotate(<angle>) 
3.   通过指定的角度对元素指定一个2D旋转 
4.   需要先有一个transform-origin属性的定义 
5.   transform-origin是旋转的基点 
6.   angle是旋转的角度，正值表示顺时针，负值表示逆时针 
7.   deg为度的意思，如60deg表示60度 
8. */  
9. #test{  
10.    transform:rotate(60deg);                //w3c标准  
11.   -webkit-transform:rotate(60deg);   //webkit内核的safari和chrome  
12.   -moz-transform:rotate(60deg);      //ff  
13.   -o-transform:rotate(60deg);          //opera   
14.   -ms-transform:rotate(60deg);       //IE9  
15. }