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

福叔 2012-02-20

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
}
 

相关推荐