martes, 19 de febrero de 2013

Aplicar zoom a un elemento con el método scale de la propiedad transform CSS3


Con el método scale() de la propiedad transfom de CSS3, el elemento aumenta o disminuye el tamaño, en función de los parámetros dados para la anchura (eje X) y la altura (eje Y), así si el elemento tiene de ancho 200px y de alto 100px, si el parámetro x tiene como valor 2, el ancho del elemento pasará a tener 400px y si el parámetro y tiene como valor un 3, el alto del elemento pasará a tener 300px.

Compatibilidad ...

transform: scale()  -> Para todos los navegadores compatibles
-ms-transform: scale() -> De Internet Explorer 9 en adelante
-moz-transform: scale() -> Para Firefox
-webkit-transform: scale() -> Para versiones de crhome y safari
-o-transform: scale() -> Para versiones de Opera

transform: scale(x, y);

Ejemplo de uso de scale() ...
 
Ancho:
Alto: