一. 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. devi into python 笔记（五）异常 文件操作 sys os glob模块简单实用

    异常: Java异常: try catch块处理异常,throw引发异常. Python异常: try except块处理异常,raise引发异常. 异常如果不主动处理,则会交给Python中的缺省处 ...

  2. Linux 修改默认文件关联打开程序

    从总体上讲 /etc/gnome/defaults.list 保存了全局的打开方式-/.local/share/applications/mimeapps.list 保存了个人的打开方式当这两个文件不 ...

  3. ZOJ Problem Set - 1025解题报告

    ZOJ Problem Set - 1025 题目分类:基础题 原题地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=10 ...

  4. 【转】linux下安装opencv

    Installation in Linux These steps have been tested for Ubuntu 10.04 but should work with other distr ...

  5. C语言字节对齐 __align(),__attribute((aligned (n))),#pragma pack(n)

    转载地址 : http://blog.csdn.net/21aspnet/article/details/6729724 一.概念    对齐跟数据在内存中的位置有关.如果一个变量的内存地址正好位于它 ...

  6. 分析IIS日志文件

    "D:\Program Files (x86)\Log Parser 2.2\logparser.exe" "SELECT * FROM 'D:\u_ex160405.l ...

  7. angularjs开发常见问题-1（持续更新中...）

    angularJs中学习中- 1.刷新当前页面数据:$state.reload service.create(data).then(function (newItem) { flash.success ...

  8. linux jdk tomcat

    linux jdk tomcat mysql的安装 mysql的话,推荐使用命令行安装,而不是用外部的源码去编译,因为简单粗暴. mysql服务:sudo apt-get install mysql- ...

  9. 使用QEMU调试Linux内核代码

    http://blog.chinaunix.net/uid-20729583-id-1884617.html http://www.linuxidc.com/Linux/2014-08/105510. ...

  10. JS家的排序算法

    由于浏览器的原生支持(无需安装任何插件),用JS来学习数据结构和算法也许比c更加便捷些.因为只需一个浏览器就能啪啪啪的调试了.比如下图我学习归并排序算法时,只看代码感觉怎么都理解不了,但是结合chro ...