CSS中两种放大zoom和scale的区别
来源:互联网 发布:淘宝5金冠店铺有哪些 编辑:程序博客网 时间:2024/05/22 13:07
先说原理
zoom和scale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方。
zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置。
另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。
我们看个例子
这是几行伪代码
<style> div { width:300px;height:100px; border:1px solid #CCC; font-size:0px; line-height:100px; margin:10px; } span { display:inline-block; height:80px;width:200px;background:#F5F5F5; vertical-align:middle; overflow:hidden; } </style>
<div> <span style="-webkit-transform:scale(0.5);"></span></div><div> <span style=" -webkit-transform-origin:top left; -webkit-transform:scale(0.5); "></span></div><div> <span style="zoom:0.5;"> </span></div>
下面看效果
稍微解释一下
第一个测试中只设置了scale,于是元素以自己的中心为基点做缩放。
第二个测试中不仅设置了scale,还有origin来将缩放的基点设置到左上角,因此变化结束后元素呆在了左上角。虽然容器设置了和高度一样的行高,当它并没有在容器里居中,因为scale是先布局后变换的,变换不会对布局产生影响。
最后一个测试是使用zoom,虽然Firefox上不支持,但这是个很古老的特性了。它和第二个测试的区别是它先缩放,后计算布局。所以在例子中它得到了垂直居中效果。
阅读全文
0 0
- CSS中两种放大zoom和scale的区别
- CSS中zoom和transform:scale的区别
- CSS中的zoom属性和scale属性的用法及区别
- css中zoom与transform:scale()的区别
- Scale Up和Scale Out的区别
- CSS的zoom属性
- Scale的放大与缩小
- 比Magic Zoom 和jQZoom更好的图片轮换和图片放大效果
- flex实现窗口关闭时放大和缩小的效果 Zoom
- 浅谈 css的zoom属性
- css中的zoom的作用
- css中zoom的作用
- zoom 放大縮小屬性
- 图片放大插件Zoom
- CSS zoom
- CSS-zoom
- iscrollJs使用zoom插件的时候,图片放大模糊解决办法
- -zoom-in、zoom-out与图形放大、图形缩小的差别
- ajax浏览器跨域访问解决
- jsoup相关的工具类
- 关于产品经理
- SSH——副文本编辑器之ueditor
- android开发之GPS定位详解
- CSS中两种放大zoom和scale的区别
- Spring加载资源地址前缀的classpath:和classpath*:的比较
- 关于数据库的水平切分和垂直切分的一些概念(转)
- 获取数据库连接工具类
- final 类变量 局部变量 初始化
- C#WinForm练习——制作简易计算器
- 暑期项目开发实训 Day17
- WPF使窗体弹出时在屏幕居中位置
- 1064. 朋友数(20)