一. 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. Java for selenium(webdriver) 环境搭建

    开发环境 1. jdk1.7 2. Eclipse 3. selenium(selenium-java-2.42.2.zip) 将下载下来的 selenium-java-2.42.2.zip 解压, ...

  2. ElasticSearch elasticsearch-servicewrapper 在linux上的安装部署全程记录

    原文地址:http://www.cnblogs.com/tianjixiaoying/p/4316011.html 由于项目需求,需要在linux平台搭建一套ES服务.在搭建过程中,遇到各种各样的问题 ...

  3. 3 weekend110的job提交的逻辑及YARN框架的技术机制 + MR程序的几种提交运行模式

    途径1: 途径2: 途径3: 成功! 由此,可以好好比较下,途径1和途径2 和途径3 的区别. 现在,来玩玩weekend110的joba提交的逻辑之源码跟踪 原来如此,weekend110的job提 ...

  4. Oracle学习.Windows 命令行 启动ORACLE服务与实例

    使用数据库前要先打开数据库的实例和监听器! --总结启动命令如下: lsnrctl  [start|stop|status]                  --启动监听器,停止监听器,查看监听器的 ...

  5. JMeter入门(4)：Java Request实例

    目的:对Java程序进行测试: 一.核心步骤 1.创建一个Java工程: 2.将JMeter的lib目录下的jar文件添加进此工程的Build Path: 3.创建一个类并实现JavaSamplerC ...

  6. LabSharp莱博夏普简介

    莱博夏普提供实验室信息化解决方案,为实验室提供LIMS系统建设方案咨询,并为中小型LIMS系统供应商提供系统解决方案咨询.

  7. 设置Win10文件资源管理器默认打开“这台电脑”

    当Windows系统进入Win7之后,任务栏默认的文件资源管理器图标功能是“库”:Win8/Win8.1的这一按钮打开的是“这台电脑”.进入Win10之后,目前这一功能默认变为“快速访问”(曾经被称为 ...

  8. EasyUI-增删改操作

    最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现 ...

  9. sql执行计划解析案例（二）

    sql执行计划解析案例(二)   今天是2013-10-09,本来以前自己在专注oracle sga中buffer cache 以及shared pool知识点的研究.但是在研究cache buffe ...

  10. 12V继电器开关控制

    案例描述:“灯控项目”中让单片机通过IO口控制继电器,继电器接入GPRS电路板供电电源,从而实现单片机对GPRS电路板的开关控制 电路图 所需元器件:1个五脚继电器,1个NPN三极管,2个电阻,1个二 ...