Transformaciones

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Las transformaciones son propiedades de estilo que te permiten modificar la apariencia y posición de tus componentes mediante transformaciones 2D o 3D. Sin embargo, al aplicar transformaciones, los diseños circundantes mantienen su posición original, lo que podría causar superposición con componentes adyacentes. Puedes aplicar márgenes al componente transformado, márgenes a los componentes cercanos o padding al contenedor para evitar estas superposiciones.

Ejemplo

---

Referencia

Transformación

transform acepta un array de objetos de transformación o valores de cadena separados por espacios. Cada objeto especifica la propiedad a transformar como clave y el valor a usar en la transformación. No combines objetos. Utiliza un único par clave/valor por objeto.

Las transformaciones de rotación requieren una cadena que exprese el valor en grados (deg) o radianes (rad). Por ejemplo:

js

{
  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
}

El mismo resultado puede lograrse usando una cadena separada por espacios:

js

{
  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
}

Las transformaciones de inclinación (skew) requieren una cadena que exprese el valor en grados (deg). Por ejemplo:

js

{
  transform: [{skewX: '45deg'}],
}

Transformación Matricial

La transformación matrix acepta una matriz de transformación 4x4 como un array de 16 números. Esto te permite aplicar transformaciones complejas que combinan traslación, rotación, escalado e inclinación en una sola operación.

La matriz se especifica en orden de columnas principales (column-major):

js

{
  transform: [
    {
      matrix: [
        scaleX,
        skewY,
        0,
        0,
        skewX,
        scaleY,
        0,
        0,
        0,
        0,
        1,
        0,
        translateX,
        translateY,
        0,
        1,
      ],
    },
  ];
}

Por ejemplo, para aplicar una combinación de escalado e inclinación:

js

{
  transform: [
    {
      matrix: [
        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
      ],
    },
  ];
}

nota

Las transformaciones matriciales son útiles cuando necesitas aplicar matrices precalculadas, como las de bibliotecas de animación o al construir aplicaciones de edición de UI. Para transformaciones básicas, se recomienda usar propiedades individuales (scale, rotate, translate, etc.) ya que son más legibles.

Type	Required
array of objects: {matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string} or string	No

---

decomposedMatrix, rotation, scaleX, scaleY, transformMatrix, translateX, translateY

Obsoleto

Utiliza la propiedad transform en su lugar.

Origen de transformación

La propiedad transformOrigin establece el origen para las transformaciones de una vista. El origen de transformación es el punto alrededor del cual se aplica una transformación. Por defecto, el origen de una transformación es center.

Ejemplo

Valores

El origen de transformación admite valores en px, percentage y palabras clave: top, left, right, bottom, center.

La propiedad transformOrigin puede especificarse usando uno, dos o tres valores, donde cada valor representa un desplazamiento.

Sintaxis de un valor:

• El valor debe ser un px, un percentage o una de las palabras clave: left, center, right, top, bottom.

js

{
  transformOrigin: '20px',
  transformOrigin: 'bottom',
}

Sintaxis de dos valores:

• El primer valor (desplazamiento-x) debe ser un px, un percentage, o una de las palabras clave: left, center, right.

• El segundo valor (desplazamiento-y) debe ser un px, un percentage o una de las palabras clave: top, center, bottom.

js

{
  transformOrigin: '10px 2px',
  transformOrigin: 'left top',
  transformOrigin: 'top right',
}

Sintaxis de tres valores:

• Los primeros dos valores son idénticos a la sintaxis de dos valores.

• El tercer valor (desplazamiento-z) debe ser un px. Siempre representa el desplazamiento Z.

js

{
  transformOrigin: '2px 30% 10px',
  transformOrigin: 'right bottom 20px',
}

Sintaxis de array

transformOrigin también admite sintaxis de array. Esto facilita su uso con APIs animadas y evita el análisis de cadenas, por lo que debería ser más eficiente.

js

{
  // Using numeric values
  transformOrigin: [10, 30, 40],
  // Mixing numeric and percentage values
  transformOrigin: [10, '20%', 0],
}

Puedes consultar la guía de MDN sobre Origen de transformación para obtener más información.