首页 > Web开发 > 详细

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

时间:2014-08-22 14:25:18      阅读:238      评论:0      收藏:0      [点我收藏+]

1、语法:

 

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

 

 

2、取值:

 

  • none                                  ----不进行变化
  • <transform-function>         ----一个或多个变换函数,以空格分开
 
可以用于内联元素和块级元素,可以实现旋转、缩放、移动等等效果。具体如下:
 
  • rotate ---旋转
Java代码  bubuko.com,布布扣
  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. }  
 
 

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

原文:http://www.cnblogs.com/ranzige/p/3929286.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!