Transformaciones con CSS

JMiur

Las transformaciones de un elemento utilizando sólo CSS son uno de los proyectos de la versión 3 que aún se discute y que algunos navegadores ya imprementan con ciertas variantes. En teoría, será tan simple como escribir cualquier otra propiedad:

transform: funcion(parámetros);

En los navegadores se usan de este modo:

-moz-transform: funcion(parámetros); // en Mozilla
-webkit-transform: funcion(parámetros); // en Safari y Chrome
-o-transform: funcion(parámetros); // en Opera

No tienen equivalencias en Internet Explorer aunque allí hay un filtro llamado Matrix que permitiría simularlas.

En principio, hay varias funciones:

scale(x,y)

Aumenta o disminuye el tamaño del elemento; su valor normal es 1. Valores superiores aumentan su tamaño e inferiores lo disminuyen así, 1.5 hará que se vea un 50% más grande y 0.5 un 50% más chico; si sólo se coloca un valor, este se aplica a ambas direcciones, caso contrario, el primero indica el ancho y el segundo el alto.

scaleX(x) y scaleY(y) son lo mismo pero sólo afectan al ancho (X) o al alto (Y).

por ejemplo:

-moz-transform:scale(2); -webkit-transform:scale(2); -o-transform:scale(2);

colocar el cursor encima para ver el efecto

En IE es posible utilizarla con bastante facilidad cuando se trata de cosas simples porque el resultado no va a ser el mismo, para eso, es necesario que el elemento sea un layout y lo conseguimos adicionándole la propiedad zoom: 1; que es la misma que usaremos para luego cambiarle la escala:

zoom: 1; el elemento no cambia
zoom: 1.5; aumentar su tamaño
zoom: 0.5; disminuye su tamaño

colocar el cursor encima para ver el efecto

rotate(a)

Gira un elemento. El valor se expresa en grados, si es positivo gira en el sentido de las agujas del rejo, si es negativo, en el sentido contrario.

-moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg);

En IE puede usarse algún filtro que calculamos usando esta herramienta; por ejemplo:

-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-o-transform:rotate(5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455);
zoom: 1;

un ejemplo

un EjEmplo

skew(a, b)

Skew significa sesgar o sea, inclinar y eso hace esta propiedad que también utiliza ángulos como valor, el primero afecta al eje X (horizontal) y el segundo al eje Y (vertical).

skewX(a) y skewY(a) hacen lo mismo pero sólo sobre uno de los ejes.

-moz-transform:skew(5deg); -webkit-transform:skew(5deg); -o-transform:skew(5deg);

translate(x, y)

Desplaza el elemento, el primer valor lo hace en el eje horizontal y el segunod en el eje vertical.

translateX(x) y translateY(x) hacen lo mismo pero sólo sobre uno de los ejes.

-moz-transform:translate(20px); -webkit-transform:translate(20px); -o-transform:translate(20px);

un ejemplo

matrix(a, c, b, d, x, y)

Es una combinación de todos ellos, por ejemplo:

matrix (1, 0, 0, 1, x, y) equivale a translate x e y
matrix (x, 0, 0, y, 0, 0) equivale a scale x e y
matrix (1, y, x, 1, 0, 0) equivale a skew x e y

Por defecto, un elemento sin deformaciones tendría esta propiedad: matrix(1, 0, 0, 1, 0px, 0px) así que en este ejemplo:

matrix(1.5, 0.1, 0.8, 1.2, -10px, 0px):

1.5 es la escala X

0.1 es la inclinacion sobre el eje X
0.8 es la inclinacion sobre el eje Y
1.2 es la escala Y

-10px es el desplazamiento horizontal

0px es el desplazamiento vertical

Y eso generaría una cosa rara:

último ejemplo