问题描述
我在寻找一些我从未使用的css属性,并且了解 css3 的缩放
属性
-
它们之间的相似点和区别是什么?
-
当规模?
-
这是更有效的使用方式,为什么?
我注意到了什么?
-
缩放它的中心和缩放它的左上方我想;
-
当我们使用它们缩放悬停时,缩放会缩放,尺度只会在悬停时收缩。
**
* {-webkit-transition-duration:0.3s; -moz-转变持续时间:0.3s; -ms-transition-duration:0.3s; - 跃迁持续时间: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;背景:#07a; -webkit-transform:scale(2); -moz-transform:scale(2); -ms-transform:scale(2); -o-transform:scale(2); transform:scale(2); transform-origin:top left;}。两个{top:10px; left:100px;背景:#eee; zoom:200%;}
< div class = one>< / div>< div class =two>< / div>
缩放
/ strong>会在不同的浏览器中影响定位。例如
position:absolute; left:50px;缩放:50%;
- IE不会更改左侧值
- Chrome会将左侧值更改为25像素。 (left = left * zoom),并且Devtools不告诉你这一点,计算值仍然会显示
left:50px
,但它是躺着。
转换在所有浏览器中的处理方式都一样(就我所知)。
position:absolute; left:50px; transform:scale(0.5)
- 在Chrome和IE中,Left有效地设置为25px。 (未在Devtools中反映)
- 要避免浏览器更改您的左侧值,只需使用
transform-origin:0 0
仍为50像素
演示:显示2个框,其中小框缩放或缩放到50%。看起来像这样:
编辑:img更新时间:2016-06-16使用Firefox(自上次以来,Chrome或IE没有任何改变)
I was looking for some css properties that i never used and came to know about zoom
property of css3
What is the similarities and difference between them?
When to use Zoom and when scale? Both does pretty much same job.
Which is more efficient to use and Why?
What have i noticed?
both scales the object but default transform-origin for scale its center and for zoom its top-left i think;
when we use them for scaling on hover, zoom will scale and again shrinks to the original dimention, while scale will only shrink on hover-out.-->> jsfiddle showing hover effectst**
*
{
-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>
Some 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>
Transform is more predictable than zoom across browsers.
Zoom affects positioning differently in different browsers. For example
position:absolute; left:50px; zoom: 50%;
- IE will not change the left value
- Chrome will change the left value to 25px. (left = left * zoom) and Devtools does not tell you this, Computed Values will still display
left: 50px
, but it is lying.
Transform is handled the same way in all browsers (as far as I can tell).
position:absolute; left:50px; transform: scale(0.5)
- Left would effectively be set to 25px in both Chrome and IE. (not reflected in Devtools)
- To avoid the browser changing your left value, simply use
transform-origin: 0 0
and left will remain 50px
Demo: http://jsfiddle.net/4z728fmk/ shows 2 boxes where the small one is zoomed or scaled to 50%. Looks like this:
edit: img updated 2016-06-16 with Firefox (nothing had change in Chrome or IE since last time)
这篇关于缩放。缩放CSS3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!