Zoom Vs. Skala in CSS3

Ich war auf der Suche für einige css-Eigenschaften, die ich nie verwendet und kam zu wissen, über zoom Eigenschaft von css3

• Was die ähnlichkeiten und Unterschiede zwischen Ihnen?

• Wann verwenden Sie Vergrößern und als Maßstab? Beides geht so ziemlich dieselbe Arbeit.

• Welche effizienter zu nutzen und Warum?

Was habe ich bemerkt?

• beide Skalen des Objekts, sondern Standard-transformieren-Herkunft zum Maßstab seiner Mitte für zoom oberen linken glaube ich;

• wenn wir verwenden Sie für die Skalierung auf hover zoom skalieren und wieder schrumpft, original-Dimension, während die Skala wird nur verkleinern auf hover-out.
  -->> jsfiddle zeigt hover effectst**

CSS:

*
{
    -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);
}

HTML:

<box></box>
<box2></box2>

---

Einige Stackoverflow-QA

• Was Bedeutet "zoom" machen im CSS?

• Zoom-versus-transformieren-skalieren

CSS:

div {
  display: inline-block;
  height: 50px;
  width: 50px;
}
.one {
  background: #07a;
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
  transform-origin: top top;
}
.two {
  background: #eee;
  zoom: 200%;
  margin-left:100px;
}

.three {
  background: #07a;
  transform-origin: top left;
  transition:all 0.6s ease;
}

.three:hover{
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

.four {
  background: #eee;
  transition:all 0.6s ease;
}

.four:hover{
  zoom: 200%;
}

HTML:

<h4>Already zoomed and scalled</h4>
<div class="one"></div>
<div class="two"></div>
<hr>
<h4>Zoomed and Scalled on hover</h4>
<div class="three"></div>
<div class="four"></div>