动画
2d转化
transform:matrix(2,0.2,0.2,2,30,40)
第一个2和第四个2分别代表x,y方向的缩放倍数,正值为放大
两个0.2分别代表y,x方向倾斜度数的正弦值;
最后两个数30,40分别代表X,Y方向的移动px值
单独表示,则为:
transform:translate(100px,1oopx)-----向右 ,下方向移动
transform:rotate(60deg)-----顺时针方向旋转60度
transform:scale(2 2)-----x,y方向都扩大两倍
transform:skew(30deg 4odeg)-----分为拉动左上,右下两个角获得的倾斜(上下边平行x轴)及拉住右上,左下两个角获得的倾斜图形(左右边平行于y轴),角度分别为30度和4度。
3d转换
以某个边为定边进行旋转
transform:rotateX(或Y或Z)(30deg)
3d过渡
transition:(all 2s )
四个值的表示顺序:
transition-property
transition-duration
transition-timing-function
transition-delay
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。