Transformaciones

Rotaciones rotate

Características:

• 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 angulares pueden ser: grados sexagesimales (deg), radianes (rad), grados centesimales (grad) o vueltas de circunferencia (turn)
• 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
• Vista:

  

Escalado scale

Características:

• 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
• Vista:

  

Traslaciones translate

Características:

• 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
• Vista:

  

Deformaciones skew

Características:

• 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
• Vista:

  

Transformaciones complejas matrix

Características:

• 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);