transicion - ¿Qué hace el ''zoom'' en CSS?

transform scale css hover

Question

Descubrí que algunos complementos de jQuery, en su regla css usan el descriptor ''zoom'', incluso miro el sitio web de w3c y descubrí que se usa para ampliar, pero ¿cómo puedo implementarlo? ¿O tengo que definir alguna ventana? ¿Y cómo defino tal viewport? ¿O me equivoco sobre todo esto?

es posible usarlo como

a {
    zoom:1;
}

a:hover {
   zoom:2;
}

Answer 1

Como señaló Joshua M, la función de zoom no solo es compatible con Firefox, pero puedes corregir esto como se muestra:

div.zoom {
  zoom: 2; /* all browsers */
 -moz-transform: scale(2);  /* Firefox */
}

Answer 2

El zoom no está incluido en la especificación CSS, pero es compatible con IE, Safari 4, Chrome (y puedes obtener un efecto similar en Firefox con -moz-transform: scale(x) desde 3.5). Ver here

Por lo tanto, todos los navegadores

 zoom: 2;
 zoom: 200%;

ampliará su objeto en 2, por lo que es como duplicar el tamaño. Lo que significa que si tienes

a:hover {
   zoom: 2;
}

Al pasar el <a> , la etiqueta <a> se ampliará en un 200%.

Como digo, en FireFox 3.5+ use -moz-transform: scale(x) , hace casi lo mismo.

Edit: En respuesta al comentario de thirtydot , diré que scale() no es un reemplazo completo. No se expande en línea como lo hace el zoom , sino que se expandirá fuera de la caja y sobre el contenido, sin forzar a otro contenido fuera del camino. Vea esto en acción here . Además, parece que el zoom no es compatible con Opera.

This publicación ofrece una visión útil de las formas de solucionar las incompatibilidades con la scale y las soluciones para ella utilizando jQuery.

Answer 3

Esta propiedad controla el nivel de ampliación del elemento actual. El efecto de representación para el elemento es el de una función de "zoom" en una cámara. Aunque esta propiedad no se hereda, sigue afectando la representación de elementos secundarios.

Ejemplo

 div { zoom: 200% }
 <div style=”zoom: 200%”>This is x2 text </div>

Answer 4

La propiedad de zoom CSS es ampliamente compatible ahora> 86% de la población total del navegador.

Consulte: http://caniuse.com/#search=zoom

document.querySelector(''#sel-jsz'').style.zoom = 4;

#sel-001 {
  zoom: 2.5;
}
#sel-002 {
  zoom: 5;
}
#sel-003 {
  zoom: 300%;
}

<div id="sel-000">IMG - Default</div>

<div id="sel-001">IMG - 1X</div>

<div id="sel-002">IMG - 5X</div>

<div id="sel-003">IMG - 3X</div>


<div id="sel-jsz">JS Zoom - 4x</div>

Answer 5

Solo IE y WebKit admiten zoom, y sí, en teoría hace exactamente lo que estás diciendo.

Pruébalo en una imagen para ver su efecto completo :)

Answer 6

Sorprendió que nadie mencionara ese zoom: 1; es útil para IE6-7, para resolver la mayoría de los errores solo de IE activando hasLayout .

Answer 7

zoom es una especificación css3 para el descriptor de @viewport, como se describe aquí

http://dev.w3.org/csswg/css-device-adapt/#zoom-desc

utilizado para hacer zoom en toda la ventana gráfica (''pantalla''). También sucede que los elementos de zoom en muchos navegadores, pero no todos. css3 especifica la transformación: la escala debe usarse para lograr tal efecto:

http://www.w3.org/TR/css3-transforms/#transform-functions

pero funciona un poco diferente al ''elemento zoom'' en los navegadores que lo admiten.