• 不断学习才有回报,学无止境!

css3中transform旋转rotate的用法

DIV+CSS技巧发现 箭翎 740次浏览 0个评论 扫描二维码

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
}


箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明css3中transform旋转rotate的用法
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址