zoom与transform:scale的区别
一. zoom特性
1. zoom是IE的私有属性,但目前除Firefox不支持外,其他浏览器支持尚好.
2.定义:
zoom即变焦,可改变元素尺寸,属于真实尺寸.zoom:百分值/数值/normal(即1);
简单示例:
二. transform: scale
属于css3规范,IE9+的现代浏览器全部支持.
语法为:transform: scale(x,y);只支持数值(包括负值),不支持百分比;
衍生的属性值包括scaleX,scaleY;
简单示例:
三.对比差异
- zoom的缩放是相对于左上角的；而scale默认是居中缩放；
- zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
- 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的区别的更多相关文章
- zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
- 小tips: zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...
- zoom和transform:scale()的区别
zoom和transform:scale()都可以用于缩放,目前移动端存在各种各样不同屏幕大小的手机,为了兼容不同宽度的屏幕,我们可以基于某一屏幕宽度大小(比如iPhone5的320,这个根据设计稿来 ...
- 2D转换下的zoom和transform:scale的区别
一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到, ...
- css 中 zoom和transform:scale的区别(转载)
一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: z ...
- zoom，zoom与haslayout的关系，zoom与transform: scale( )的区别
1.zoom:(缩放)
- zoom和transform scale
一.zoom zoom的字面意思是“变焦”,摄影的时候常用到的一个概念.对于web上的zoom效果,你也可以按照此概念理解.可以改变页面上元素的尺寸,属于真实尺寸. 在旧的web时代.*zoom: 1 ...
- vector3.forward和transform.forward的区别！
http://blog.163.com/bowen_tong/blog/static/20681717420146654927791/ vector3.forward和transform.forwar ...
随机推荐
- python 零散记录(七)（上） 面向对象 类 类的私有化
python面向对象的三大特性: 多态,封装,继承 多态: 在不知道对象到底是什么类型.又想对其做一些操作时,就会用到多态 如 'abc'.count('a') #对字符串使用count函数返回a的数 ...
- devi into python 笔记（一）字典 列表的简单操作
模块: python中模块是很重要的概念,在模块中加入 if __name__ == "__main__": pass 会使模块应用起来更加灵活,避免出错. =========== ...
- 对 Linux 初级、中级、高级用户非常有用的 60 个命令
对 Linux 初级.中级.高级用户非常有用的 60 个命令 初级篇: 你打算从Windows换到Linux上来,还是你刚好换到Linux上来?哎哟!!!我说什么呢,是什么原因你就出现在我的世界里了. ...
- ListControl常用操作汇总
本文根据本人在项目中的应用,来谈谈CListCtrl的部分用法及技巧.当初学习时,查了很多资料,零零碎碎的作了些记录,现在主要是来做个总结,方便以后查阅.主要包括以下十三点内容:基本操作.获取选中行的 ...
- Visual Studio 2015安装过程卡住，解决办法
Visual Studio 2015安装过程中卡住的情况有很多,我遇到的是卡在安装windows 更新KB2999226,解决办法 手动安装此更新包,位置在Visual Studio的安装包中,目录: ...
- iOS中SQLite知识点总结2
数据库(SQLite) 01-多表查询 格式:select 字段1,字段2,... from 表名1,表名2; 别名:select 别名1.字段1 as 字段别名1,别名2.字段2 as 字段别名2, ...
- 应用程序无法正常启动0xc0150002 解决方式
我也遇到过此问题,解决的方法: 方案一: 在项目的"属性|配置属性|链接器|常规"中的"启用增量链接"选择"否".此方法阻断了问题产 ...
- 基于特定领域国土GIS应用框架设计及应用
基于特定领域国土GIS应用框架 设计及应用 何仕国 2012年8月16日 摘要: 本文首先讲述了什么是框架和特定领域框架,以及与国土GIS 这个特定领 ...
- Android开发_字符串处理类-TextUtils类
对于字符串处理Android为我们提供了一个简单实用的TextUtils类,如果处理比较简单的内容不用去思考正则表达式不妨试试这个在android.text.TextUtils的类,主要的功能如下: ...
- 移动測试技术保护源码！解码全球首款移动端白盒測试工具ThreadingTest (文章转自己主动点科技）
作者 智晓锋 - 2014/07/14 自从斯诺登曝光美监听丑闻事件之后,我国政府就将信息安全问题上升到了国家安全的高度.基于此.国内的一家创业公司推出了智能型Android真机白盒測试以及开发辅助类 ...