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 ...
随机推荐
- 【转】从QA到EP
从QA到EP 两三年以前,和友人谈到 QA(软件质量保证) 这个行业,还有 QA 这个团队的未来,就有了一丝忧虑.而现在,终于有机会实践一下自己之前的想法,在这里分享给大家. 从我有限的从业经验到现在 ...
- c#自动更新+安装程序的制作
一.自动更新的实现 让客户端实现自动更新,通常做法是在客户端部署一个单独的自动更新程序.主程序启动后,访问服务端,检查配置文件是否有更新版本,有更新版本就启动更新程序,由更新负责下载更新版本,并更新客 ...
- cssText设置css样式
js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js 如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div ...
- CentOS搭建GIT服务器【一】-仓库搭建以及基于gitosis的SSH方式访问
1.安装GIT核心 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel gcc g ...
- div border-radius
可以画个1/4之一的圆也可以画整个圆 <html> <style type="text/css"> div{ background-color: #000; ...
- 基于url的权限管理
基于url权限管理流程 完成权限管理的数据模型创建. 1. 系统登陆 系统 登陆相当 于用户身份认证,用户成功,要在session中记录用户的身份信息. 操作流程: 用户进行登陆页面 输入用户 ...
- DES加密，Tk写的简单的GUI
# -*- coding: UTF-8 -*- from Tkinter import * from tkMessageBox import * ip = [ 58,50,42,34,26,18,10 ...
- SQL 中having 和where的区别分析
在select语句中可以使用groupby子句将行划分成较小的组,然后,使用聚组函数返回每一个组的汇总信息,另外,可以使用having子句限制返回的结果集 在select语句中可以使用groupby子 ...
- SQL2008和SQL2000可以跨服务器连接查询的测试实例
测试目的: SQL2008 和 SQL2000 是否可以跨服务器连接查询 -- 测试环境: --A 虚拟机 XP ( IP : .0.0.213 )安装 SQL2000 个人版,并安装 SP4 补丁. ...
- StirngUtil工具类 之 邮箱注冊 域名不区分大写和小写方法
/** * 传入邮箱域名所有变为小写,然后拼接前缀返回 *<b>Summary: </b> * emailDomainTransform() * @param domain * ...