zoom与transform:scale的区别

一. zoom特性

1. zoom是IE的私有属性,但目前除Firefox不支持外,其他浏览器支持尚好.

2.定义:

zoom即变焦,可改变元素尺寸,属于真实尺寸.zoom:百分值/数值/normal(即1);

简单示例:

二. transform: scale

属于css3规范,IE9+的现代浏览器全部支持.

语法为:transform: scale(x,y);只支持数值(包括负值),不支持百分比;

衍生的属性值包括scaleX,scaleY;

简单示例:

三.对比差异

zoom的缩放是相对于左上角的；而scale默认是居中缩放；
zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
zoom和scale对元素的渲染计算方法可能有差异:zoom锐利,scale模糊

简单示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Zoom Test</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    .wrap {
        width: 200px;
        margin: 20px;
        border: 1px solid #ccc;
    }
    
    .wrap img {
        width: 100%;
    }
    
    .zoom-large:hover {
        zoom: 1.2;
        /** 从左上方开始放大 */
    }
    
    .scale-large:hover {
        transform: scale(1.2, 1.2);
        /** 从中心点开始放大 */
    }
    
    .zoom-small:hover {
        zoom: 0.7;
    }
    
    .scale-small:hover {
        transform: scale(0.7);
    }
    </style>
</head>

<body>
    <div class="wrap zoom-large">
        <img src="demo.jpg" alt="">
    </div>
    <div class="wrap scale-large">
        <img src="demo.jpg" alt="">
    </div>
    <div class="wrap zoom-small">
        <p>呜噜噜噜</p><!-- 此处字体scale缩小会变锐利-->
        <img src="demo.jpg" alt="">
    </div>
    <div class="wrap scale-small">
        <p>呜噜噜噜</p><!-- 此处字体scale缩小会变模糊-->
        <img src="demo.jpg" alt="">
    </div>
</body>

</html>

四:特别说明

chrome浏览器上同时使用zoom和scale,缩放效果会叠加.

Over~