Translate, Rotate y Scale

transform aplica transformaciones visuales 2D y 3D a los elementos: desplazamiento, rotación, escalado y distorsión. Las transformaciones ocurren después del layout y no afectan a los elementos circundantes.

Mueve un elemento desde su posición actual. Argumentos: desplazamiento en x e y.

Funciones para cada eje, para mayor claridad:

Gira un elemento un ángulo determinado. Los valores positivos giran en el sentido de las agujas del reloj.

Cambia la escala de un elemento de manera uniforme o por eje. Los valores menores que 1 lo reducen; los mayores que 1 lo amplían.

Cambie la escala de forma independiente en un eje:

Varias funciones de transformación se aplican en orden, de derecha a izquierda. El orden afecta al resultado.

transform-origin establece el punto de pivote para las rotaciones y los cambios de escala. El valor predeterminado es el centro (50% 50%).

El CSS moderno permite establecer funciones de transformación individuales como propiedades independientes:

Transform es una de las dos propiedades compuestas por la GPU. Anímela siempre con transition para obtener efectos fluidos y eficientes:

Para las animaciones, prefiera siempre transform: translate() en lugar de top/left. Transform se compone mediante la GPU; top/left provoca un recálculo del diseño en cada fotograma.

¿Qué función de transformación refleja un elemento horizontalmente, como al voltear una tarjeta?

transform mueve, gira y cambia la escala de los elementos después del diseño sin afectar al contenido circundante. Use translate() para mover, rotate() para girar y scale() para cambiar el tamaño. Encadene varias funciones en una sola declaración. El CSS moderno admite propiedades de transformación individuales. Anime siempre con transiciones para obtener un rendimiento fluido mediante la composición en la GPU.