首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css3动画变换transform用法

css3动画变换transform用法

作者头像
十月梦想
发布2018-08-29 11:05:44
3360
发布2018-08-29 11:05:44
举报
文章被收录于专栏:十月梦想十月梦想

刚才说到transition动画执行,接下来看下动画变换(transform),transform属性的取值4个

transform: rotate | scale | skew | translate

rotate(旋转):

rotate() :指定一个2D旋转,正数顺时针,负数逆时针旋转

执行图像的旋转,单位deg,50deg顺时针选择50度,-50deg逆时针旋转

translate(平移):

translate(x,y):设置移动效果,x表示水平方向,y表示数值方向,整数右,下,负数上左方向

scale(缩放)

scale(num1,num2):设置元素的缩放,num1表示水平的缩放比例,num2竖直缩放比例,1表示不变,1.2表示2倍,0.8表示0.8倍!

skew(扭曲):

扭曲效果 skew(30deg,60deg):图像扭曲效果,不同方位进行拉伸

transform-origi(元素基点位置):

transform-origin:设置旋转元素的基点位置 语法:transform-origin: 20% 40%;

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-2-2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • rotate(旋转):
  • translate(平移):
  • scale(缩放)
  • skew(扭曲):
  • transform-origi(元素基点位置):
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档