一. 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. 对使命召唤OL游戏中队友能相互救治的动作设定的感慨

    很偶然的在网吧看到有人在玩一个枪战游戏,场景特别真实特别吸引人,后来留意到是使命召唤OL.我使用QQ帐号(是腾讯代理)玩了一次,觉得游戏做的确实精致,子弹打击效果和人物被子弹击中的效果特别真实,大家可 ...

  2. 页面中引入带中文的JS文件乱码问题

    1. WebConfig: <globalization requestEncoding="gb2312" responseEncoding="gb2312&quo ...

  3. （转载）VC/MFC 工具栏上动态添加组合框等控件的方法

    引言 工具条作为大多数标准的Windows应用程序的 一个重要组成部分,使其成为促进人机界面友好的一个重要工具.通过工具条极大方便了用户对程序的操作,但是在由Microsoft Visual C++开 ...

  4. 使用DNSAgent拦截特定域名

    开发程序时,为方便测试,需要把本来发往abc.com的数据发到本地. 最简单的方法是直接在程序中修改,把abc.com修改为需要的地址. 但这样提交代码时,容易把调试地址给提交到服务器. 或是嵌入式设 ...

  5. PHP向MySql中插入数据

    <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Prope ...

  6. selenuim +python环境配置遇到的诸多问题

    自动化测试入门,总结一下安装selenium.python以及配置webdriver遇到的问题: 准备工作: 1.下载火狐浏览器并安装插件selenium IDE.Firebug~~ 2.下载安装py ...

  7. 基于OpenCV的人脸识别［iOS开发笔记（2）］

    开始了OpenCV的试水工作了... 1.Get ready 在OpenCV中我们会使用函数cv::CascadeClassifier 来进行人脸检测.但是在使用本函数之前我们需要添加一个XML文件对 ...

  8. easyui在当前tab中直接加载url

    var tab = $('#mainTabs').tabs('getSelected'); // get selected panel $('#mainTabs').tabs('update', { ...

  9. SQL GROUP BY GROUPING SETS,ROLLUP,CUBE（需求举例）

    实现按照不同级别分组统计 关于GROUP BY 中的GROUPING SETS,ROLLUP,CUBE 从需求的角度理解会更加容易些. 需求举例: 假如一所学校只有两个系, 每个系有两个专业, 每个专 ...

  10. android3.2以上切屏禁止onCreate()

    一般切屏禁止onCreate()方法需要将activity加上属性: android:configChanges=”orientation|keyboardHidden” 但是在3.2以上就不起作用了 ...