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*