css深入剖析transform的scale

一、scale

指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。
伸缩的是此元素的变化坐标轴的刻度

1.伸缩性

.box {
    width: 100px;
    height: 100px;
    background-color: black;
    transform-origin: 0 0;
    transform: scale(2,2);
    /* transform: scaleX(2) scaleY(2); */
}

看上去方块放大了两倍，其实不止于此

transform: scale(2,2) translateX(50px);/*此时沿x轴正方向移动的是100px*/

2.叠加性

scale会进行叠加操作，即多次设置不会后者覆盖前者，而是叠加

.box {
    width: 50px;
    height: 50px;
    background-color: black;
    transform-origin: 0 0;
    transform: scale(2,2);
}

.box {
    width: 50px;
    height: 50px;
    background-color: black;
    transform-origin: 0 0;
    transform: scale(2,2) scale(2,2);
}

3.保留影响

.box {
    width: 50px;
    height: 100px;
    background-color: black;
    transform-origin: 0 0;
    transform: scale(2,1) rotateX(40deg);
}

.box {
    width: 50px;
    height: 100px;
    background-color: black;
    transform-origin: 0 0;
    transform: scale(2,1) rotateX(40deg) scale(2,1);
}

它前面伸缩变化后翻转，再变换时，前面伸缩对它的翻转影响一直存在。

二、scale3d

指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

body{
    perspective: 800px;
    transform-style: preserve-3d;
    perspective-origin: 200px 200px;
}
.box {
    width: 150px;
    height: 150px;
    background-color: black;
    transform-origin: 0 0;
    transform: rotateY(90deg) rotateX(40deg); 
}

.box {
    width: 150px;
    height: 150px;
    background-color: black;
    transform-origin: 0 0;
    transform: rotateY(90deg) scaleZ(2) rotateX(40deg); 
}

transform: scaleX(2) scaleZ(2) scaleY(2); 
transform: scale3d(2,2,2);

两者相同含义