img - zoom css w3school

Zoom vs. Escalar en CSS3

Question

Estaba buscando algunas propiedades CSS que nunca usé y aprendí acerca de la propiedad zoom de css3

• ¿Cuál es la similitud y la diferencia entre ellos?

• Cuándo usar Zoom y cuándo escalar? Ambos hacen más o menos el mismo trabajo.

• ¿Cuál es más eficiente de usar y por qué?

¿Qué he notado?

• ambos escalan el objeto pero el origen de transformación predeterminado para escalar su centro y para el zoom, arriba a la izquierda, creo;

• cuando los usamos para escalar al desplazarse, el zoom se escalará y volverá a reducirse a la dimensión original, mientras que la escala solo se contraerá al desplazarse hacia afuera. - >> jsfiddle mostrando los efectos de desplazamiento estacionario **

*
{
    -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>

Algunos QA de Stackoverflow

• ¿Qué hace ''zoom'' en CSS?

• Escala de Zoom versus -transforma

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>

Answer 1

Complementario a la respuesta de Drkawashima:

• zoom no funciona en Firefox en absoluto. Ver caniuse
• Érase una vez (el cuento de hadas termina aquí, lo siento), zoom: 1; fue la poderosa declaración que ayudó a depurar IE6. Le confirió al elemento que se aplicó un "interruptor" interno a este navegador llamado hasLayout (no una propiedad de CSS, simplemente es un concepto como "clearfix"). Encontrarás position: relative; zoom: 1; position: relative; zoom: 1; bastante en viejos proyectos

Answer 2

La transformación es más predecible que el zoom en los navegadores.

El zoom afecta el posicionamiento de manera diferente en diferentes navegadores.

ejemplo: position:absolute; left:50px; zoom: 50%; position:absolute; left:50px; zoom: 50%;

• IE no cambiará el valor de la left en absoluto.
• Chrome cambiará el valor de la izquierda a 25px . Efectivamente sí lo hace left = left * zoom . Pero DevTools Computed Values ​​en DevTools seguirá mostrándose a la left: 50px , aunque eso no sea cierto debido al zoom.

Transform se maneja de la misma manera en todos los navegadores (hasta donde yo sé).

ejemplo: position:absolute; left:50px; transform: scale(0.5) position:absolute; left:50px; transform: scale(0.5)

• left se establecería 25px en 25px tanto en Chrome como en IE. (De nuevo, los valores calculados aún no reflejarán esto, se mostrará a la left:50px )
• Para evitar cambiar el valor de la left , simplemente use transform-origin: 0 0 . Eso asegurará que la izquierda todavía es 50px.

Demostración: http://jsfiddle.net/4z728fmk/ muestra 2 cuadros donde el pequeño se amplía o escala al 50%. Se ve como esto:

edit: img actualizado 2016-06-16 con Firefox (nada había cambiado en Chrome o IE desde la última vez)

Answer 3

zoom no funciona con animaciones CSS o propiedad de transition : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties