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

Cambiar origen de transformación

Características:

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