1.transform使用
<div style="width: 300px; height: 300px; background: gray; ">
<div style="width: 100px; height: 100px; background: indianred;transform: scale(0.5);transform-origin:left top;">
</div>
<div style="width: 300px; height: 300px; background: indianred;transform: scale(0.5);transform-origin:left top;">
</div>
</div>
// scaleX 横向缩放量 scaleY纵向缩放量 transform: scale(scaleX scaleY)
transform:scale(2); 等同于变换:transform: scale(2 2);//缩放后的顶点对齐方式
transform-origin:left top; //上下左右
2.实际占用空间
zoom可以将标签等比例进行放大或缩小的操作,实际占用的空间也会改变,但zoom在进行缩小时,部分样式依然会受到浏览器的限制,例如最小字号为12px;
transform属性进行的所有操作都不会改变标签的实际大小和占用空间,例如使用transform: scale()缩小2倍时,该元素的实际占用空间仍然为缩小前的大小,解决的方法就是在该元素的外层套上一个标签,该标签的大小为缩小的那个标签缩小后的尺寸,使用overflow: hidden属性可将多余的部分隐藏掉,这样就不会有缩小后占用多余空间的显示问题。
<div style="height:300px;width:300px;background: gray;">
<div style="height:50px;width:50px;overflow:hidden;">
<div style="width: 100px; height: 100px; background: indianred;transform: scale(0.5);transform-origin:left top;">
</div>
</div>
<div style="width: 300px; height: 300px; background: indianred;transform: scale(0.5);transform-origin:left top;">
</div>
</div>