El cambio de escala

Regresar al índice

1. La escala proporcional

La función scale permite transformar el tamaño de un elemento según una escala de 0 a 1, en la que 1 es el tamaño inicial.

La clase del ejemplo siguiente permite aplicar una transformación proporcional según una escala del 50% con respecto al tamaño inicial.

.escala {

-moz-transform: scale(.5);

-webkit-transform: scale(.5);

-o-transform: scale(.5);

transform: scale(.5);

}

2. La escala no proporcional

Si usted indica dos valores, el primero hará referencia al cambio de escala horizontal y, el segundo, al cambio de escala vertical.

En el ejemplo se ha aplicado un cambio de escala del 50% horizontalmente y del 20% verticalmente.

.escala {

-moz-transform: scale(.5,.2);

-webkit-transform: scale(.5,.2);

-o-transform: scale(.5,.2);

transform: scale(.5,.2);

}

3. El cambio de escala en una única dirección

Puede usar las funciones: 

• scaleX: para el cambio de escala horizontal, 
• scaleY: para el cambio de escala vertical.

En este ejemplo, el cambio de la escala es exclusivamente horizontal:

.escala {

-moz-transform: scaleX(.5);

-webkit-transform: scaleX(.5);

-o-transform: scaleX(.5);

transform: scaleX(.5);

}

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice

Twittear