文档章节

zoom和transform:scale的区别

mxPickle
 mxPickle
发布于 2017/09/06 10:02
字数 335
阅读 10
收藏 0
点赞 0
评论 0

1、zoom:

  以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom。下面开始进行对zoom的探究。

  zoom:normal | <number> | <percentage>
    默认值:normal
    适用于:所有元素
    继承性:有
    动画性:是
    计算值:绝对长度
  取值:
    normal:
          使用对象的实际尺寸。(等同于zoom:1)
    <number>:
          用浮点数来定义缩放比例。不允许负值
    <percentage>:
          用百分比来定义缩放比例。不允许负值

  兼容性:

Zoom的字面意思是“变焦”,摄影的时候常用到的一个概念。对于web上的zoom效果,你也可以按照此概念理解。可以改变页面上元素的尺寸,属于真实尺寸。在以前,zoom可以给IE6/IE7浏览器增加haslayout, 用来清除浮动,修复一些布局上的疑难杂症等。

2、transform:scale

  transform:scale是css3变形中的缩放

  语法为:transform: scale(<x> [<y>]). 同时有scaleX, scaleY专门的x, y方向的控制。(这里不专门介绍transform:scale)
  和zoom不同,scale并不支持百分比值和normal关键字,只能是数值。而且,还能是负数,没错,负数。而zoom不能是负值!

Example:

© 著作权归作者所有

共有 人打赏支持
mxPickle
粉丝 0
博文 5
码字总数 2170
作品 0
深圳
前端工程师
CSS3实践手册

will-change 不要再使用或者去骗GPU硬件加速了,而应使用提前通知浏览器我们需要对元素做什么动画,以便浏览器提前准备合适的优化设置 注意合理使用,不能泛滥使用造成系统资源浪费,同时给浏...

前端届的科比 ⋅ 2015/09/03 ⋅ 0

网页缩放zoom用法

网页缩放zoom用法: function zoomhtml(){ var wid=$(window).width(),len; if(wid<1600){ len=wid/1600; console.log(wid) $("html").css("zoom",len); $("html").css({"-moz-transform":"s......

yudeboo ⋅ 2017/08/10 ⋅ 0

JavaScript 图片3D展示空间(3DRoom)

一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果。 程序就是模拟这样一个三维空间,里面的图片会根据三维坐标显示在这个空间。 很久以前就...

青衫无名 ⋅ 2017/12/04 ⋅ 0

关于Map Chart里面Zoom效果的问题

前天看Dojo新的部件 Map Chart ,有人做过么 我看了代码, 想改变一下官方demo里那个zoom的方式 默认的是那种按照个曲线缩放的效果, 我想变成常规的, 就跟googlemap相似的那种缩放效果 哪位能指...

LiuDashen ⋅ 2011/03/16 ⋅ 1

10 款强大的 jQuery 图片插件

这些jQuery的图片插件包括图片缩放、剪裁、展示等功能。 1. AJAX-ZOOM This plugin are very interesting. This is and ajax zoomer, and pan gallery, and also possibility to rotate obje......

红薯 ⋅ 2011/06/14 ⋅ 0

你知道我们平时在CSS中写的%都是相对于谁吗?

0.引言 在我们编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问...

腾讯课堂 ⋅ 05/28 ⋅ 0

IOS 核心动画之CAKeyframeAnimation - iBaby

IOS 核心动画之CAKeyframeAnimation 简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyfram...

caoxiang ⋅ 2015/09/11 ⋅ 1

详细讲解transform,一看就懂了!(转)

Transform字面上就是变形,改变的意思。 在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 下面我们一起来看看CSS3中transform的旋...

羊皮卷 ⋅ 2016/04/09 ⋅ 0

一生中最爱/miniView

MiniView.js - An interesting web plugin ! I offer you a web plugin based on jquery that make a mini view of a container on your page. And support mousewheel zoom in. support ie9......

一生中最爱 ⋅ 2017/10/12 ⋅ 0

CSS旋转与翻转使用示例详解

css 2.0还是没有翻转的,3.0里面有rotate属性,这个可以把元素进行任意角度旋转,灰常强大,下面有个不错的示例,大家可以参考下 一个项目中要画一个图,有横坐标和纵坐标,纵坐标需要文字转...

至简6 ⋅ 2014/09/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

关于“幂等”操作

一个幂等(idempotent)操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同. 开发中, 我们经常考虑幂等操作的场景有“接口调用”、“MQ消费”、“自动任务”等 接口调用, 可能出现...

零二一七 ⋅ 17分钟前 ⋅ 0

Dubbo服务服务暴露之ProxyFactory Invoker

Dubbo服务暴露过程中有涉及到调用ProxyFactory 中方法获取Invoker对象的过程,现在我们来深究下源码,来看下这个过程是在做些什么,返回的Invoker 对象是什么,我们来看一下代码的切入点: ...

哲别0 ⋅ 32分钟前 ⋅ 0

GP两种连接方式性能测试

GP两种连接方式性能测试 Pivotal import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; public class GPQueryStrin......

仔仔1993 ⋅ 36分钟前 ⋅ 0

jsonrpc-4j代码解析

解析文件 AutoJsonRpcServiceImplExporter JsonServiceExporter AutoJsonRpcServiceImplExporter 路径:com.googlecode.jsonrpc4j.spring.AutoJsonRpcServiceImplExporter AutoJsonRpcServi......

郭恩洲_OSC博客 ⋅ 58分钟前 ⋅ 0

百度搜索

from selenium import webdriver import time brower=webdriver.Firefox() brower.get('http://www.baidu.com') input=brower.find_element_by_id('kw') input.send_keys('中南大学') time.s......

南桥北木 ⋅ 今天 ⋅ 0

tomcat 日志记录器

1、日志记录器是记录消息的组件 日志记录器需要与某个servlet 容器相关联 2、Logger 接口 共定义了5种日志级别:FATAL、ERROR、WARNING、INFORMATION、DEBUGGER setVerbosity 设置级别 setC...

职业搬砖20年 ⋅ 今天 ⋅ 0

Thrift RPC实战(三) Thrift序列化机制

1.Thrift基础架构 Thrift是一个客户端和服务端的架构体系,数据通过socket传输; 具有自己内部定义的传输协议规范(TProtocol)和传输数据标准(TTransports); 通过IDL脚本对传输数据的数据结构...

lemonLove ⋅ 今天 ⋅ 0

网站建设就要像2018世界杯的俄罗斯队大杀四方[图]

今天心情不错,因为昨天晚上观看了世界杯比赛,尤其是对俄罗斯队的大杀四方感到十分霸气侧漏啊,因此我联想到了自己的博客网站,我的博客是去年年底上线的,一直想建设一个关于读书和读后感作...

原创小博客 ⋅ 今天 ⋅ 0

linux 信号机制

signal(SIGPIPE, SIG_IGN); TCP是全双工的信道, 可以看作两条单工信道, TCP连接两端的两个端点各负责一条. 当对端调用close时, 虽然本意是关闭整个两条信道, 但本端只是收到FIN包. 按照TCP协...

xxdd ⋅ 今天 ⋅ 0

my.cnf, my-small.cnf, my-medium.cnf, my-large.cnf

1. my-small.cnf # Example MySQL config file for small systems.## This is for a system with little memory (<= 64M) where MySQL is only used# from time to time and it's importa......

周云台 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部