CSS动画transform的偏移translate、拉伸skew、缩放scale、旋转rotate、perspective透视
transform的介绍：为CSS元素添加偏移、拉伸、旋转、缩放等效果
几个属性值
常用四个2D视觉效果属性----translate、skew、scale、rotate
.box {
transform: translate(10px, 20px) //在x轴向右平移10个像素点，y轴向下平移20个像素点
transform: translate(20%, 20%) //x轴向右平移自身宽度的20%个像素点，y轴向下平移自身高度的20%的像素点
transfom: skewY(20deg) //y轴逆时针旋转20度
transform: skew(-5deg, 20deg) //x轴顺时针旋转5度，y轴逆时针旋转20度
transform: rotate(20deg) //顺时针
transform: rotate(-20deg) //逆时针
transform: scale(.5) //缩小2倍
transform: scale(20 //扩大两倍
//3D透视效果
transform: perspective(100px) //值越小表示物体离视角越近，物体会显得比较大。
}
perspective透视最好与rotate一起使用来制造3D效果
transform: perspective(500px) rotateX(60deg);
transform-origin表示效果参考的原点，有两个参数表示坐标轴的x,y，默认值是在元素的中心。
transform-origin: 0 0 //表示以元素的左上角为变换点进行变化
与矩阵matrix()函数的关系
transform2D移动变换效果是基于matrix函数矩阵的，2D变换矩阵为3*3的行列。matrix函数有六个参数，假设为a b c d e f；matrix(a, b ,c, d, e, f)，
transform: matrix(a, b ,c, d, e, f)
此时需要改变元素的位置到(x,y)点，那么；利用矩阵知识可以如下表示，matrix对应的矩阵行列式为：
a c e x ax+cy+e
b d f * y = bx+dy+f
0 0 1 1 1
ax+cy+e表示x变化后的坐标；bx+dy+f表示变化后的y坐标。
transform: matrix()函数里的六个参数与这几个动画效果的关系
修改其中的几个参数即可达到skew拉伸、rotate旋转、translate偏移、scale缩放的效果。
对于translate来说，只需要看matrix的最后两个参数即可，设matrix(1, 0, 0, 1, A, B)，令A=30 B=30, 即将元素从原始点(x, y)移动30后的位置为 （x+30, y+30）。
对于scale来说，变换第一个和第四个参数即可，martix(s, 0, 0, s, 0, 0)
变化后的坐标为：x’=sx+0y+01=sx ; y’=0x+sy+0=s*y
等同于scale(sx, sy)。
对于rotate旋转来说，需要用到三角函数cos和sin函数了。
matrix(cos θ, sin θ, -sin θ, cos θ, 0, 0 )
变化后的坐标为： x’ = xcosθ-ysinθ+0 = xcosθ-ysinθ； y’ = xsinθ+ycosθ+0 = xsinθ+ycosθ
等同于 rotate(θ)，对于旋转来说使用rotate无疑表述简单。
对于skew拉伸来说，需要用到正弦函数tan，matrix(1, tan(θy), tan(θx), 0 , 0)，
变化后的坐标为： x’ = x+ytan(θx)+0 = x+ytan(θx) ； y’ = xtan(θy)+y+0 = xtan(θy)+y
等同于skew(θ)，skew写起来简洁。
虽然matrix功能强大，但是有时候是需要用到skew、rotate等方法；matrix可以实现**镜像效果，**对于任意的对称轴y=k*x，而言点（x,y）经过对称后的对称点坐标可以利用两点垂直和中心点在轴线的知识得到两个方程。
具体参考张大神的： https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩阵/