一. zoom特性

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

2.定义:

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

简单示例:

二. transform: scale

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

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

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

简单示例:

三.对比差异

  1. zoom的缩放是相对于左上角的；而scale默认是居中缩放；
  2. zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
  3. 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~

zoom与transform:scale的区别的更多相关文章

  1. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

  2. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

  3. 小tips: zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...

  4. zoom和transform:scale()的区别

    zoom和transform:scale()都可以用于缩放,目前移动端存在各种各样不同屏幕大小的手机,为了兼容不同宽度的屏幕,我们可以基于某一屏幕宽度大小(比如iPhone5的320,这个根据设计稿来 ...

  5. 2D转换下的zoom和transform:scale的区别

    一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到, ...

  6. css 中 zoom和transform:scale的区别(转载)

    一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: z ...

  7. zoom，zoom与haslayout的关系，zoom与transform: scale( )的区别

    1.zoom:(缩放)

  8. zoom和transform scale

    一.zoom zoom的字面意思是“变焦”,摄影的时候常用到的一个概念.对于web上的zoom效果,你也可以按照此概念理解.可以改变页面上元素的尺寸,属于真实尺寸. 在旧的web时代.*zoom: 1 ...

  9. vector3.forward和transform.forward的区别！

    http://blog.163.com/bowen_tong/blog/static/20681717420146654927791/ vector3.forward和transform.forwar ...

随机推荐

  1. Ubuntu修改源

    linux里的源,简单理解就是你用 apt-get 命令去下载安装软件时,系统去哪里找这个软件.去的那个位置就是源. linux默认的源是国外的,下载速度比较慢,可以修改为国内的一些好的源地址,例如网 ...

  2. 删除顺序链表中重复的数 (一) leecode

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  3. Java项目中基于Hibernate分页总结

    1,First of all,  we should have a wrapper class for page,this class can calculate the startRow by th ...

  4. lfs遇到的一些问题--后续阶段

    1.安装GPM-1.20.7,make install出错: prog/display-buttons.c:39:57: 致命错误:gpm.h:没有那个文件或目录 #include <gpm.h ...

  5. JavaScript高级程序设计56.pdf

    选择选项 对于只允许选择一项的选择框,访问选中项最简单的方式是selectedIndex属性 var selectedOption=selectbox.options["selectbox. ...

  6. Centos6.4_X64飞信安装

  7. BFS+状态压缩 hdu-1885-Key Task

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1885 题目意思: 给一个矩阵,给一个起点多个终点,有些点有墙不能通过,有些点的位置有门,需要拿到相应 ...

  8. linux内核--内核内存管理

    如题目所示,为什么要称作“内核内存管理”,因为内核所需要的内存和用户态所需要的内存,这两者在管理上是不一样的. 这篇文章描述内核的内存管理,用户态的内存管理在以后的文章中讲述. 首先简单的说明一下下面 ...

  9. 【JAVA - SSM】之MyBatis开发DAO

    在SSM框架中的DAO层就是MyBatis中的Mapper,Mapper分为两部分:Mapper接口(JAVA文件)和Mapper映射文件(XML文件).DAO开发(Mapper开发)有两种方式:原始 ...

  10. 微信小程序开发体验

    1.  申请小程序账号 小程序目前不支持个人申请,企业申请后填写基本信息 本来以为用原来公司申请的公众号就可以申请小程序权限,貌似不行 2.  添加开发者 管理员默认拥有开发者所有权限 添加其他开发者 ...