css3动画变换transform用法

刚才说到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%;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

sparklines迷你图系列14——Correlation(HeatMap)

今天跟大家分享的是sparklines迷你图系列13——Correlation(HeatMap)。 热力图在excel中可以轻松的通过自带的条件格式配合单元格数...

3136
来自专栏互联网软件技术

鼠标点击特效

1902
来自专栏河湾欢儿的专栏

文本

font-size 文字大小 font-weight 文字加粗(bold加粗/normal正常) font-style 文字倾斜(italic倾斜/norm...

1013
来自专栏搞前端的李蚊子

使用canvas实现一个圆球的触壁反弹

HTML <canvas id="canvas" width="500" height="500" style="border: 1px solid #FF00...

2895
来自专栏MelonTeam专栏

日迹中视频编辑滤镜效果实现方法

导语 本文简要分析,日迹视频解码流程以及视频滤镜的实现原理 需求背景:日迹需要的编辑滤镜效果预览图 图1:日迹滤镜效果 要实现产品想要的...

2788
来自专栏Linux驱动

31.QPainter-rotate()函数分析-文字旋转不倾斜,图片旋转实现等待

30.QT-渐变之QLinearGradient、 QConicalGradient、QRadialGradient

1093
来自专栏菜鸟计划

CSS基础语法(三) CSS的6种特性

样式表常用写法及特性(组合、继承、关联性、权值性、层叠性、重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开。-例如:段落元素p、单元...

3424
来自专栏章鱼的慢慢技术路

MFC绘图小实验(1)

2235
来自专栏柠檬先生

SVG 使用

SVG即Scalable Vector Graphics可缩放矢量图形,使用XML格式定义图形, 主要优势在于可缩放的同时不会影响图片的质量。 SVG 在htm...

2169
来自专栏mySoul

css3过渡

transition 为一个简写属性,是一个transition-property (定义过渡的属性的名称)以及 transition-duration (定义...

1725

扫码关注云+社区

领取腾讯云代金券