刚才说到transition动画执行,接下来看下动画变换(transform),transform属性的取值4个
transform: rotate | scale | skew | translate
rotate() :指定一个2D旋转,正数顺时针,负数逆时针旋转
执行图像的旋转,单位deg,50deg顺时针选择50度,-50deg逆时针旋转
translate(x,y):设置移动效果,x表示水平方向,y表示数值方向,整数右,下,负数上左方向
scale(num1,num2):设置元素的缩放,num1表示水平的缩放比例,num2竖直缩放比例,1表示不变,1.2表示2倍,0.8表示0.8倍!
扭曲效果 skew(30deg,60deg):图像扭曲效果,不同方位进行拉伸
transform-origin:设置旋转元素的基点位置 语法:transform-origin: 20% 40%;