CSSTransformaciones 2D


Sintaxis

  • Transformar rotar
  • transformar: rotar (<angle>)
  • Traducir Transformar
  • transformar: traducir (<length-or-percentage> [, <length-or-percentage>]?)
  • transform: translateX (<length-or-percentage>)
  • transform: translateY (<length-or-percentage>)
  • Transformación sesgada
  • transformar: sesgar (<angle> [, <angle>]?)
  • transformar: skewX (<angle>)
  • transformar: skewY (<angle>)
  • Transformación de escala
  • transform: scale (<scale-factor> [, <scale-factor>]?)
  • transform: scaleX (<scale-factor>)
  • transform: scaleY (<scale-factor>)
  • Transformada de matriz
  • transformar: matriz (<número> [, <número>] {5,5})

Parámetros

Función / Parámetro Detalles
rotate(x) Define una transformación que mueve el elemento alrededor de un punto fijo en el eje Z
translate(x,y) Mueve la posición del elemento en los ejes X e Y
translateX(x) Mueve la posición del elemento en el eje X
translateY(y) Mueve la posición del elemento en el eje Y
scale(x,y) Modifica el tamaño del elemento en los ejes X e Y
scaleX(x) Modifica el tamaño del elemento en el eje X
scaleY(y) Modifica el tamaño del elemento en el eje Y
skew(x,y) Mapeo de corte, o transvección, distorsionando cada punto de un elemento por un cierto ángulo en cada dirección
skewX(x) Mapeo de corte horizontal distorsionando cada punto de un elemento por un cierto ángulo en la dirección horizontal
skewY(y) Mapeo de corte vertical distorsionando cada punto de un elemento por un cierto ángulo en la dirección vertical
matrix() Define una transformación 2D en forma de matriz de transformación.
ángulo El ángulo por el cual el elemento debe rotarse o sesgarse (dependiendo de la función con la que se use). Ángulo puede ser proporcionado en grados ( deg ), gradianes ( grad ), radianes ( rad ) o vueltas ( turn ). En la función skew() , el segundo ángulo es opcional. Si no se proporciona, no habrá (0) sesgo en el eje Y.
longitud o porcentaje La distancia expresada como una longitud o un porcentaje por el cual el elemento debe ser traducido. En la función translate() , la segunda longitud o porcentaje es opcional. Si no se proporciona, entonces no habría (0) traducción en el eje Y.
factor de escala Un número que define cuántas veces se debe escalar el elemento en el eje especificado. En la función scale() , el segundo factor de escala es opcional. Si no se proporciona, el primer factor de escala también se aplicará para el eje Y.

Observaciones

Sistema coordinador 2D

Las transformaciones se realizan de acuerdo con un sistema de coordenadas X / Y 2D. El eje X va de derecha a izquierda y el eje Y va hacia abajo, como se muestra en la siguiente imagen:

Sistema de coordenadas 2D CSS

Por lo tanto, una translateY() positiva Y translateY() va hacia abajo y una translateX() positiva translateX() va a la derecha.

Soporte de navegador y prefijos

  • IE admite esta propiedad desde IE9 con el prefijo -ms- . Las versiones anteriores y Edge no necesitan el prefijo
  • Firefox lo admite desde la versión 3.5 y necesita el prefijo -moz- hasta la versión 15
  • Chrome desde la versión 4 y hasta la versión 34 necesita el prefijo -webkit-
  • Safari necesita el prefijo -webkit- hasta la versión 8
  • Opera necesita el prefijo -o- para la versión 11.5 y el prefijo -webkit- de la versión 15 a la 22
  • Android necesita el prefijo -webkit- de la versión 2.1 a 4.4.4

Ejemplo de transformación prefijada:

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

Transformaciones 2D Ejemplos relacionados