css3中的transform属性讲解

transform变换

属性如下
matrix()：2d矩阵
translate()：平移，第一个参数为x轴，第二个参数为y轴，第二个参数默认为0
translatex()：X轴（水平方向）的平移
translatey()：Y轴（垂直方向）的平移
rotate()：2D旋转
scale()：2D伸缩。第一个参数对应X轴，第二个参数对应Y轴。第二个参数默认与第一个参数的值一样。伸缩的是此元素的变化坐标轴的刻度，不改变元素本身大小，伸缩后，伸缩轴会一直影响后面元素。
scalex()：X轴的缩放
scaley()：Y轴的缩放
skew()：倾斜坐标轴，也拉伸了坐标轴，x有值倾斜y轴
skewx()：X轴的倾斜,正值往逆时针方向倾斜
skewy()：Y轴的倾斜，正值往顺时针方向
matrix3d()：以一个4x4矩阵的形式指定一个3D变换
translate3d()：3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatez()：Z轴的平移
rotate3d()：指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，x，y，z的比值作为一个矢量方向轴
rotatex()：在x轴上的旋转角度
rotatey()：在y轴上的旋转角度
rotatez()：在z轴上的旋转角度
scale3d()：指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
scalez()：z轴缩放
perspective()：透视距离，景深，需要给父级设置

举例

这是坐标轴,箭头代表角度为正值时的转动方向

body{
   
    /* 3D视图 */
    perspective: 800px;

    /* 3D堆叠层 */
    transform-style: preserve-3d;

    /* 眼睛的视点 默认center center*/
    perspective