Open Adamwu1992 opened 6 years ago
首先在屏幕上脑补出一个坐标系，坐标原点是(0,0)，就是元素所占区域的左上角，transform-origin(x, y)可以改变原点的位置。
translate: translate(10px, 20px)表示将元素沿着x轴移动10px，沿着y轴移动20px；
rotate: rotate(10deg)表示将元素沿着z轴旋转10度，z轴就是垂直与屏幕的轴，效果和rotateZ相同。以此类推rotateX(angle)就是沿着x轴旋转，rotateY(angle)就是沿着y轴旋转；
skew: skew(10deg, 20deg)表示将元素沿着x轴拉伸10度，沿着y轴拉伸20度；
scale: scale(2, 3)表示将元素沿着x轴放大2倍，沿着y轴放大3倍。
matrix(a, b, c, d, e, f) 表示一个3*2的矩阵，元素中的任意一点(x, y)和矩阵相乘得到变换后的点(ax+cy+e, bx+dy+f)。
常用值
变换原理
首先在屏幕上脑补出一个坐标系，坐标原点是(0,0)，就是元素所占区域的左上角，transform-origin(x, y)可以改变原点的位置。
translate: translate(10px, 20px)表示将元素沿着x轴移动10px，沿着y轴移动20px；
rotate: rotate(10deg)表示将元素沿着z轴旋转10度，z轴就是垂直与屏幕的轴，效果和rotateZ相同。以此类推rotateX(angle)就是沿着x轴旋转，rotateY(angle)就是沿着y轴旋转；
skew: skew(10deg, 20deg)表示将元素沿着x轴拉伸10度，沿着y轴拉伸20度；
scale: scale(2, 3)表示将元素沿着x轴放大2倍，沿着y轴放大3倍。
矩阵变换
matrix(a, b, c, d, e, f) 表示一个3*2的矩阵，元素中的任意一点(x, y)和矩阵相乘得到变换后的点(ax+cy+e, bx+dy+f)。