Una transformación CSS es una modificación visual que no altera el layout, aunque mueva, rote, escale o deforme un elemento.
A veces no basta con cambiar un color o añadir una sombra. Queremos que un botón suba un poco al pasar el ratón, que una tarjeta se incline, que un icono gire o que un elemento aparezca desplazándose desde un lado.
Para eso existe la propiedad transform, una de las más agradecidas de CSS. Es potente, rápida y muy usada en animaciones, porque permite cambiar la apariencia de un elemento sin obligar al navegador a recolocar toda la página.
Transformar no es recolocar
Este punto es importante. Cuando usamos transform, el elemento cambia visualmente, pero su hueco original en el layout sigue estando donde estaba.
.caja {
transform: translateX(40px);
}
La caja se dibuja 40 píxeles más a la derecha, pero para el resto de elementos sigue ocupando su sitio original. No empuja a sus vecinos, no recalcula la fila, no cambia el flujo normal del documento.
Transformaciones 2D fundamentales
La propiedad transform acepta funciones. Cada función aplica una operación distinta sobre el elemento.
Mover un elemento
translate() desplaza visualmente un elemento en el eje X y/o Y.
.movido {
transform: translate(50px, -20px);
}
.sube-un-poco {
transform: translateY(-0.25rem);
}
Es ideal para animaciones de entrada, botones que se elevan y pequeños desplazamientos.
.boton {
transition: transform 0.2s ease;
}
.boton:hover {
transform: translateY(-2px);
}
Cambiar tamaño visual
scale() aumenta o reduce el tamaño aparente del elemento.
.zoom {
transform: scale(1.2);
}
.pequeno {
transform: scale(0.8);
}
1 es el tamaño original. 1.2 significa un 20% más grande. 0.8 significa un 20% más pequeño.
También podemos escalar cada eje por separado.
.estirado {
transform: scaleX(1.5);
}
.aplastado {
transform: scaleY(0.6);
}
Rotar
rotate() gira el elemento. Normalmente usamos grados (deg).
.inclinado {
transform: rotate(15deg);
}
.volteado {
transform: rotate(-90deg);
}
Los valores positivos giran en sentido horario. Los negativos giran en sentido contrario.
Deformar
skew() inclina el elemento en uno o dos ejes.
.sesgado {
transform: skewX(-12deg);
}
Se usa menos que translate, scale o rotate, pero puede servir para etiquetas, fondos inclinados o efectos gráficos concretos.
El salto al 3D
CSS también permite transformaciones en 3D. Además de los ejes X e Y, aparece el eje Z, que representa profundidad.
.carta {
transform: rotateY(180deg);
}
Para que una transformación 3D tenga sensación de profundidad, necesitamos perspectiva. Normalmente se aplica al contenedor padre.
.escenario {
perspective: 1000px;
}
.carta {
transition: transform 0.5s ease;
transform-style: preserve-3d;
}
.escenario:hover .carta {
transform: rotateY(180deg);
}
La perspectiva indica la distancia entre el usuario y el plano 3D. Un valor pequeño exagera mucho la profundidad. Un valor grande la hace más sutil.
Para empezar con 3D, valores entre 800px y 1200px suelen dar resultados razonables. Si ponéis 100px, la tarjeta puede parecer que se ha metido en una película de ciencia ficción de bajo presupuesto.
Ejemplo: tarjeta que se eleva
Un uso muy habitual de transform es mejorar el estado :hover de una tarjeta.
.tarjeta {
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tarjeta:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px rgb(0 0 0 / 14%);
}
No estamos cambiando el layout. Solo dibujamos la tarjeta un poco más arriba y reforzamos la sombra. El usuario percibe que el elemento es interactivo (yo odio bastante este efecto, pero ahí está)
