Transformaciones: propiedades

Utilizamos rotate(deg) para hacer girar elementos alrededor del punto origen, que por defecto es el centro del elemento.

El elemento gira hacia la derecha (a favor de las agujas del reloj) con ángulos positivos y hacia la izquierda (sentido contrario) con ángulos negativos.

Las unidades son grados (deg) o radianes (rad).

Utilizando rotateX() y rotateY() podemos hacer lo mismo respecto al eje X o el eje Y respectivamente.

Sintaxis:

transform: rotate(25deg); gira 25º a favor de las agujas del reloj

Se utiliza para aumentar o reducir el tamaño de los elementos.

El elemento aumenta con valores mayores a 1 y se reduce con valores entre 0 y 1.

Un valor de 2 (sin unidades) significa el doble de tamaño. Un valor de 0.5 significa la mitad del tamaño del elemento.

Un solo valor indica aumento/disminución tanto en ancho (eje X) como en alto (eje Y).

Un segundo valor [opcional], separado por una coma, permite valores distintos para ancho y alto.

Si utilizamos scale(x,y) con dos parámetros iguales, mantenemos la proporción del elemento, pero si utilizamos diferentes valores, se deforma.

Sintaxis:

transform: scale(1.3); aumenta ancho y alto un 30%
transform: scale(1.2,0.7); aumenta 20% ancho, diminuye 30% alto

Utilizamos translate(x,y) para mover elementos.

El origen de la transformación está en el centro del elemento.

La unidad es el px. Valores positivos para movimientos a la derecha. Valores negativos representan movimiento a la izquierda.

Un segundo parámetro [opcional], separado por una coma, mueve el elemento hacia abajo con valores positivos y hacia arriba con valores negativos.

Sintaxis:

transform: translate(-50px); se mueve 50px a la izquierda
transform: translate(25px,100px); 25px a la derecha, 100px hacia abajo

Utilizamos skew(x) para torcer o inclinar un elemento en 2D.

El origen de la transformación está en el centro del elemento.

El elemento se inclina alrededor del eje X (horizontal) los grados indicados. Los valores positivos representan una inclinación a la izquierda, los valores negativos inclinan el elemento a la derecha.

Se puede utilizar un segundo parámetro [opcional], separado por coma, que es el ángulo de inclinación alrededor del eje Y (vertical). Los valores positivos inclinan el elemento hacia abajo y viceversa.

Sintaxis:

transform: skew(25deg); inclina 25º a la izquierda
transform: skewX(xdeg); deformación 2D respecto al eje X
transform: skewY(ydeg); deformación 2D respecto al eje Y

Es la propiedad abreviada (shorthand) de las transformaciones anteriores.

Se utiliza para inclinar, mover, escalar,... elementos

Se configura con 6 valores numéricos (como una matriz matemática).

Se puede entender mejor como funciona consultando:
- understanding-the-css-transforms-matrix
- useragentman.com

Si el uso del método matrix nos parece complicado, siempre podemos utilizar varios métodos para un mismo elemento, para ello basta con ponerlos seguidos, separados simplemente por uno o varios espacios.

Recuerda que si estableces varias propiedades transform en el mismo elemento con diferentes funciones de transformación, la segunda sobreescribirá a la anterior. Para evitarlo, puedes emplear múltiples transformaciones separándolas mediante un espacio de esta forma:
transform: rotate(15deg) scale(1.5,2) translate(25px);

Sintaxis:

matrix(1,0.25,0.5,1,50,0);

La propiedad transform-origin indica cual será el punto de origen desde el que se transforma el elemento.

Este punto, por defecto es el centro del elemento.

La propiedad tiene dos valores, el primero de ellos indica la coordenada X (horizontal) del origen, la cual puede expresarse en porcentaje, medida o las palabras clave left | center | right que indican respectivamente el lado izquierdo, el centro o el lado derecho del elemento.

El segundo valor indica la coordenada Y (vertical) y puede expresarse en porcentaje, medida o las palabras clave top | center | bottom que indican respectivamente el lado superior, el centro o el lado inferior.

Sintaxis:

transform-origin: 
[ porcentaje|medida|left|center|right ] 
[ porcentaje|medida|top|center|bottom ];