css - div等比例缩放 - transform:scale
缩放比例 在CSS3中缩放 (2)
Drkawashima答案的补充：
-
zoom在Firefox中根本不起作用。 见caniuse - 曾几何时 （童话故事在这里结束对不起），
zoom: 1;是有助于调试IE6的强大声明。 它赋予了它应用的元素一个内部“开关”到这个名为hasLayout的浏览器（不是CSS属性，只是像“clearfix”这样的概念）。 你会找到position: relative; zoom: 1;position: relative; zoom: 1;在旧项目中相当多
我正在寻找一些我从未使用过的css属性，并开始了解css3的 zoom属性
它们之间有什么相似之处和区别？
何时使用Zoom和缩放？ 两者的工作差不多。
哪个更有效使用，为什么？
我注意到了什么？
两者都缩放对象但是默认变换原点用于缩放它的中心和缩放它的左上角我认为;
当我们在悬停时使用它们进行缩放时，缩放将缩放并再次收缩到原始维度，而缩放只会在悬停时缩小。 - >> jsfiddle显示悬停效果 **
*
{
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
box, box2
{
display: inline-block;
width: 100px;
height: 100px;
margin: 20px;
}
box
{
background: #b00;
}
box:hover
{
zoom: 1.1;
}
box2
{
background: #00b;
}
box2:hover
{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}<box></box>
<box2></box2>一些Stackoverflow QA
div {
display: inline-block;
height: 50px;
width: 50px;
position: absolute;
}
.one {
top: 10px;
left: 10px;
background: #07a;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
transform-origin: top left;
}
.two {
top: 10px;
left: 100px;
background: #eee;
zoom: 200%;
}<div class="one"></div>
<div class="two"></div>