读书人

css3卡通属性系列之transform细讲旋转

发布时间: 2012-09-02 21:00:34 作者: rapoo

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}
?

读书人网 >CSS

热点推荐