首页 > 代码库 > css3动画属性系列之transform细讲旋转rotate
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
- }
css3动画属性系列之transform细讲旋转rotate
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。