Element
Generated CSS
La propiedad CSS transform permite reposicionar, redimensionar, rotar y distorsionar elementos visualmente sin afectar el flujo del documento. Las transformaciones se ejecutan en el hilo compositor del navegador, lo que las hace muy eficientes para animaciones.
transform: translate(20px, 10px); /* mover */ transform: scale(1.5); /* escalar */ transform: rotate(45deg); /* rotar */ transform: skew(10deg, 5deg); /* sesgar */ /* Múltiples transformaciones */ transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
.parent { perspective: 1000px; }
.card {
transform: rotateY(30deg);
transform-style: preserve-3d;
}
transform y opacity son las únicas propiedades que pueden animarse sin causar layout o repintado. Animar top, left, width o margin recalcula el layout en cada fotograma, causando jank.
Técnica clásica: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);. Funciona sin conocer las dimensiones del elemento.