一. 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~