溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
zoom不是css的標準屬性，Firefox和Opera Mini 不支持，其他標準的瀏覽器倒是都可以很好的支持。ie從ie6以后就開始支持這個屬性。這個屬性用起來有風險，比如要考慮Firefox的兼容性問題。
tranform:scale(x) 則是css的標準屬性，除Opera Mini外，得到了幾乎所有標準瀏覽器的支持。ie瀏覽器是在ie11后開始支持，不過ie9和ie9以后的瀏覽器都支持帶前綴的屬性-ms-transform。如果你的網頁要兼容ie8及其以前的ie瀏覽器，就需要做兼容性處理，其實更好的辦法是離職吧，現在都什么時代了，怎么可能還要兼容這么古老的瀏覽器，當然了，我是開玩笑的，畢竟你窮，怎么可以輕易離職。
zoom的取值可以normal，可以是大于等于0的浮點數，也可以是大于等于0的百分比。其中normal就是元素實際的尺寸，不縮也不放，安安靜靜的像一個處子。當zoom的值為0時，zoom也是不縮也不放，跟zoom為1的情況一樣
transform:scale(x)的取值只能是數字，不能是百分比或者其他，但是取值可以是正數也可以是負數和0。其中x為0的時候，元素直接縮到消失不見了。x為負數的時候，元素會順時針旋轉180度，也可能是逆時針，我也不知道反正上下顛倒了。我指的是2d平面，3d的平面我沒研究。
而且scale是可以使用scaleX()、scaleY()、scaleZ()單獨放大x、y、z不同軸。zoom只能等比放大。
zoom是以左上角有原點進行縮放的，并且默認這個點還不能改變。如果要要實現中心的放大縮小的效果就需要動用下js動態(tài)改變元素的位置，或者你要是個牛逼哄哄的人，你就可以考慮使用ie的矩陣變換。雖然我高考數學不低130，但是我還是看不懂ie的矩陣變換到底是咋回事。
transfrom:scale(x)的變化默認是以中心點為準變化的，而且這個變化的點是可以通過transform-origin進行改變。
zoom縮放后的元素是占據實際位置的。比如zoom的元素后緊跟一個名字叫other的div。元素被放大后名字叫other的div也被擠下去了。
而scale縮放的元素是不占據實際位置的，被scale放大的元素，看起來很大，但是實際占據的位置還是之前那么小。所以其他元素并不會因此而改變位置。
還有一點需要注意，雖然scale被放大的元素不占據實際位置，但是還是可以響應事件的。
無論元素是使用zoom放大縮小還是使用scale放大縮小，元素上綁定點擊事件的話，點擊元素都會響應事件的。
因為zoom是實際改變物體大小的，而且這種改變會影響到其他元素，所以使用zoom的時候會引起瀏覽器重新渲染，性能較低。而scale是單獨只改變目標元素，并不會影響到其他的元素，所以性能會好一些。
點擊查看效果
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>room&scale</title>
<style>
html,body{
margin: 0px;
padding:0px;
}
div{
text-align: center;
}
h3{
text-align: center;
padding-bottom: 20px;
margin:0px;
border-bottom: 1px dashed black;
}
.content{
width: 100px;
margin: auto;
height: 2000px;
border-left:1px solid black;
position: relative;
}
/*zoom*/
.zoomW{
position: relative;
}
.div1{
width: 100px;
height:100px;
top:0px;
left:0px;
position: absolute;
border: 1px solid blue;
}
.div2{
width: 100px;
height: 100px;
zoom:2;
top:0px;
left:0px;
position: absolute;
border: 1px solid green;
}
.div3{
width: 100px;
height: 100px;
zoom:4;
top:0px;
left:0px;
position: absolute;
border: 1px solid red;
}
.div4{
width: 50px;
height: 50px;
border: 1px solid yellow;
}
/*scale*/
.zoomT2,.scaleT{
margin-top:600px;
}
.scaleW{
position: relative;
}
.scaleW div{
/*transform-origin:0 0;*/
}
.div5{
width: 100px;
height:100px;
top:0px;
left:0px;
position: absolute;
border: 1px solid blue;
}
.div6{
width: 100px;
height: 100px;
transform: scale(2);
-webkit-transform: scale(2);
top:0px;
left:0px;
position: absolute;
border: 1px solid green;
}
.div7{
width: 100px;
height: 100px;
-webkit-transform: scale(4);
top:0px;
left:0px;
position: absolute;
border: 1px solid red;
}
.div8{
width: 50px;
height: 50px;
border: 1px solid yellow;
}
.other{
width: 100px;
height: 100px;
border:1px solid darkblue;
}
.zoomO1{
width: 100px;
height: 100px;
zoom:1;
outline: 1px solid blue;
}
.zoomO2{
width: 100px;
height: 100px;
zoom:2;
outline: 1px solid green;
}
.scaleO1{
width: 100px;
height: 100px;
outline: 1px solid blue;
}
.scaleO2{
width: 100px;
height: 100px;
transform: scale(2);
-webkit-transform: scale(2);
outline: 1px solid green;
}
</style></head><body>
<div class="content">
<div class="zoomT">
<h3>zoom</h3>
</div>
<div class="zoomW">
<div class="div1">
div1 </div>
<div class="div2">
div2 </div>
<div class="div3">
div3 <!-- <div class="div4">
div4
</div> -->
</div>
</div>
<div class="scaleT"><h3>scale</h3></div>
<div class="scaleW">
<div class="div5">
div5 </div>
<div class="div6">
div6 </div>
<div class="div7">
div7 <!-- <div class="div8">
div8
</div> -->
</div>
</div>
<div class="zoomT2"><h3>zoom&other</h3></div>
<div class="zoomOther">
<div class="zoomO1">
zoom：1 </div>
<div class="other">
</div>
<div class="zoomO2">
zoom：2 </div>
<div class="other">
other </div>
</div>
<div class="scaleT"><h3>scale&other</h3></div>
<div class="scaleOther">
<div class="scaleO1">
scale(1) </div>
<div class="other">
other </div>
<div class="scaleO2">
scale(2) </div>
<div class="other">
other </div>
</div>
</div>
<script>
var zoomO2 = document.querySelector(".zoomO2");
zoomO2.onclick=function(){
console.log("zoomO2");
} var scaleO2 = document.querySelector(".scaleO2");
scaleO2.onclick=function(){
console.log("scaleO2");
} </script></body></html>
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
