Propiedad CSS transform

La propiedad CSS transform permite reposicionar, redimensionar, rotar o distorsionar visualmente un elemento sin afectar el diseño circundante. Es una de las propiedades CSS3 y acepta la palabra clave none o una o más funciones de transformación — por ejemplo rotate(), scale(), translate() o skew().

Un aspecto clave que hay que entender: una transformación cambia cómo se renderiza un elemento, pero el espacio que ocupaba originalmente en el flujo del documento permanece igual. Los elementos vecinos no se redistribuyen cuando transformas un elemento, lo cual es precisamente por qué las transformaciones son económicas de animar — el navegador puede delegarlas a la GPU.

Esta página cubre la sintaxis, el conjunto completo de funciones de transformación 2D y 3D, cómo el punto alrededor del cual se transforma un elemento (transform-origin) afecta el resultado, y cómo las transformaciones se combinan con transiciones y animaciones para generar movimiento.

Información

Las transformaciones se aplican a elementos transformables — cajas de bloque, flex, grid e inline-block, además de elementos SVG. No se aplican a elementos en línea no reemplazados, como un <span> sin más (dale display: inline-block primero).

Puedes encadenar varias funciones en una sola declaración. Se aplican de derecha a izquierda, por lo que la función más a la derecha se ejecuta primero:

/* first rotate, then translate the rotated box */
transform: translate(10px, 40px) rotate(50deg);

Valor inicial	none
Se aplica a	Elementos transformables.
Heredable	No.
Animable	Sí.
Versión	CSS3
Sintaxis DOM	Object.style.transform = "rotate(10deg)";

Sintaxis

Valores de CSS transform

transform: none | transform-functions | initial | inherit;

Ejemplo de la propiedad transform:

Ejemplo de código CSS transform

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px dashed #666;
        background-color: #8ebf42;
        transform: translate(10px, 40px) rotate(50deg);
        width: 130px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <div>An element</div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo con varias funciones transform

Ejemplo de CSS transform con varios valores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 35px 20px;
      }
      div.box1 {
        width: 130px;
        height: 80px;
        border: 1px solid #000;
        background-color: #1c87c9;
        transform: rotate(30deg);
      }
      div.box2 {
        width: 120px;
        height: 80px;
        border: 1px solid #000;
        background-color: #8ebf42;
        transform: skewY(30deg);
      }
      div.box3 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FFFF00;
        transform: scaleY(1.5);
      }
      div.box4 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #ccc;
        transform: rotate(160deg);
      }
      div.box5 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #990099;
        transform: translateX(50px);
      }
      div.box6 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FF0000;
        transform: skew(170deg, 170deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <h3>transform: rotate(30deg):</h3>
    <div class="box1"></div>
    <h3>transform: skewY(30deg):</h3>
    <div class="box2"></div>
    <h3>transform: scaleY(1.5):</h3>
    <div class="box3"></div>
    <h3>transform: rotate(160deg):</h3>
    <div class="box4"></div>
    <h3>transform: translateX(50px):</h3>
    <div class="box5"></div>
    <h3>transform: skew(170deg,170deg):</h3>
    <div class="box6"></div>
  </body>
</html>

Pruébalo tú mismo »

Funciones transform

translate()

translate(tx, ty) mueve un elemento horizontalmente y verticalmente sin afectar a otros elementos. tx es el desplazamiento horizontal y ty el vertical; un valor positivo de ty mueve el elemento hacia abajo. Usa translateX() o translateY() para un solo eje. Como no provoca un rediseño del layout, translate() es la forma preferida de mover un elemento en animaciones:

transform: translate(50px, 20px); /* right 50px, down 20px */
transform: translateX(-30px);     /* left 30px */

scale()

scale(x, y) redimensiona un elemento en relación a su tamaño actual. 1 lo deja sin cambios, 2 lo duplica, 0.5 lo reduce a la mitad, y un valor negativo lo refleja. Pasa un solo argumento para escalar ambos ejes por igual:

transform: scale(1.5);   /* 150% in both directions */
transform: scale(2, 0.5);/* twice as wide, half as tall */

rotate()

rotate(angle) gira un elemento alrededor de su origen. Un ángulo positivo gira en el sentido de las agujas del reloj, y un ángulo negativo en sentido contrario. El ángulo se indica en deg, rad, grad o turn:

transform: rotate(45deg);
transform: rotate(-0.25turn); /* same as rotate(-90deg) */

skew()

skew(ax, ay) inclina (sesga) un elemento a lo largo de los ejes x e y. skewX() y skewY() sesgan a lo largo de un solo eje. Un sesgo de 0deg deja el eje sin modificar:

transform: skewX(20deg);
transform: skew(20deg, 10deg);

matrix()

matrix(a, b, c, d, e, f) combina todas las transformaciones 2D — escala, sesgo, rotación y traslación — en una sola función. Rara vez se escribe a mano; los navegadores la calculan internamente y es la forma que ves al leer un estilo calculado.

transform-origin

Por defecto, cada transformación pivota alrededor del centro del elemento. La propiedad transform-origin cambia ese punto de anclaje, lo que modifica drásticamente el resultado de rotate() o scale(). Por ejemplo, transform-origin: top left hace que rotate(45deg) gire el elemento alrededor de su esquina superior izquierda en lugar de su centro.

Transformaciones 2D vs 3D

Las funciones anteriores operan en el plano 2D. Sus equivalentes 3D — translateZ(), rotateX(), rotateY(), rotate3d(), etc. — mueven y rotan elementos a través del eje z (hacia o desde el espectador). Las transformaciones 3D solo parecen tridimensionales cuando se aplica una perspective al elemento o a su padre; sin perspectiva, un rotateY() simplemente parece aplastar el elemento horizontalmente.

Animación de transformaciones

La propiedad transform es animable, por lo que es el pilar del movimiento fluido en la interfaz. Combínala con una transición para efectos hover, o con una animación y keyframes para movimiento continuo:

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: scale(1.05) translateY(-4px);
}

Valores

Valor	Descripción	Pruébalo
none	No se aplica ninguna transformación.	Pruébalo »
translate()	Traslada el elemento mediante un vector [tx, ty]. Tx es la traslación a lo largo del eje x. Ty es la traslación a lo largo del eje y.	Pruébalo »
translateX()	Traslada el elemento a lo largo del eje x.	Pruébalo »
translateY()	Traslada el elemento a lo largo del eje y.	Pruébalo »
scale(x, y)	Aumenta o reduce el tamaño de un elemento.	Pruébalo »
scaleX()	Escala un elemento a lo largo del eje x.	Pruébalo »
scaleY()	Escala un elemento a lo largo del eje y.	Pruébalo »
rotate(angle)	Rota un elemento en el espacio bidimensional. El ángulo se especifica en el parámetro.	Pruébalo »
skew()	Define una transformación de sesgo 2D a lo largo del eje x y del eje y.	Pruébalo »
skewX()	Define una transformación de sesgo 2D a lo largo del eje x.	Pruébalo »
skewY()	Define una transformación de sesgo 2D a lo largo del eje y.	Pruébalo »
matrix()	Define una transformación 2D usando una matriz de seis valores.	Pruébalo »
translateZ()	Traslada un elemento la cantidad indicada a lo largo del eje z.
translate3d()	Define una traslación tridimensional.
scaleZ()	Escala un elemento en la tercera dimensión, a lo largo del eje z.
scale3d()	Define una transformación de escala tridimensional.
rotateX()	Rota un elemento alrededor del eje x en el espacio tridimensional.	Pruébalo »
rotateY()	Rota un elemento alrededor del eje y en el espacio tridimensional.	Pruébalo »
rotateZ()	Rota un elemento alrededor del eje z en el espacio tridimensional.	Pruébalo »
rotate3d()	Define una transformación de rotación tridimensional.
matrix3d()	Define una transformación 3D usando una matriz de 4x4 de 16 valores.
perspective()	Define una vista en perspectiva para el elemento tridimensional.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál de las siguientes afirmaciones es incorrecta sobre la propiedad transform?

Se puede aplicar a elementos transformables.La propiedad transform permite rotar, escalar, sesgar o trasladar el elemento.Solo especifica la transformación bidimensional del elemento.