css深入剖析transform的scale

指定对象的2D scale&＃xff08;2D缩放&＃xff09;。第一个参数对应X轴&＃xff0c;第二个参数对应Y轴。
伸缩的是此元素的变化坐标轴的刻度

1.伸缩性

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


看上去方块放大了两倍&＃xff0c;其实不止于此

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


2.叠加性

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

.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);
}


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

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

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);


两者相同含义