zoom与transform:scale的区别

时间：2022-05-07 14:49:56

一. zoom特性

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

zoom与transform:scale的区别

2.定义:

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

简单示例:

zoom与transform:scale的区别

二. transform: scale

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

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

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

简单示例:

zoom与transform:scale的区别

三.对比差异

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

简单示例:

zoom与transform: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~zoom与transform:scale的区别

相关文章