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-origin: 300px 300px;
}

div{
    width: 200px;
    height: 200px;
    position: absolute;
    left: 200px;
    top: 200px;
    background-image: url(图片路径);
    background-size: cover;
    /* 旋转中心 */
    transform-origin:0 0;
    /*元素旋转后 参照的坐标轴也跟着旋转 */
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
<div></div>

transform:rotateX(90deg)

transform:rotateY(90deg)

transform:rotateZ(90deg)

div{
    width: 200px;
    height: 200px;
    position: absolute;
    left: 200px;
    top: 200px;
    background-image: url(图片路径);
    background-size: cover;
    transform-origin: 0 0;
    /* 伸缩 */
    transform: scale(1,1);
}

transform:scale(2,2)

看起来像是变大了，其实它本身的大小并没有变，只是它的坐标轴变了，就导致现在的400px才能表示原来的200px。如果移动它的位置就可以看出来

body{
    transform-style: preserve-3d;
    perspective: 1000px;
}
div{
    position: absolute;
    left: 200px;
    top: 200px;
    width: 200px;
    height: 200px;
    background-image: url(../6-6step2homework/imgs/clock.png);
    background-size: cover;
}
<div></div>

加上transform:translateZ(300px);

看起来变大了，是因为它离我们的眼睛更近了。它的原理是投影，我们的视线看向图像的四周，然后投影到最开始的那个平面上就是我们看到的大小。