Transformaciones CSS: rotate, scale, translate y skew
Área de pruebas de transformaciones CSS
Transformaciones CSS: rotate, scale, translate, skew, giro 3D | We.Inc
Mueve los controles deslizantes de rotate, scale, translate y skew y copia el CSS y las clases de Tailwind. Incluye el orden de las transformaciones, transform-origin, giros de tarjeta en 3D y animaciones fluidas.
Mueve, gira, redimensiona o inclina un elemento con la propiedad transform: transform: translate(20px, 0) rotate(15deg) scale(1.1) skewX(5deg). Las funciones se aplican de derecha a izquierda, así que su orden cambia el resultado. Las transformaciones nunca desplazan la maquetación de alrededor, y animarlas es barato porque el navegador puede pasarle el trabajo al compositor.
Las cuatro funciones de transformación 2D
Función
Ejemplo
Tailwind
translate()
translate(1rem, -50%)
translate-x-4 -translate-y-1/2
rotate()
rotate(45deg)
scale()
scale(1.1)
skew()
skewX(6deg)
Usa los controles deslizantes para construir una transformación y mira cómo reacciona una tarjeta; después alterna entre la propiedad transform única y las propiedades separadas translate, rotate y scale. Más abajo tienes la demo del origen, un giro 3D que puedes activar al pasar el ratón, recetas de transiciones y una nota sobre por qué las transformaciones van fluidas mientras top y left dan tirones.
Arrastra los controles de translate, rotate, scale y skew. La tarjeta se mueve y el CSS se reescribe solo.
Elige un transform-origin para ver qué punto queda fijo mientras la tarjeta gira o crece.
Alterna entre la forma abreviada transform combinada y las propiedades individuales.
Copia el CSS o las clases de Tailwind y pégalos en tu hoja de estilos o en tu HTML.
Centra una caja con posición absoluta con top: 50%; left: 50%; translate: -50% -50%. Los porcentajes en translate se refieren al propio elemento, no a su padre.
Anima transform y opacity en lugar de width, height, top o left. Esas otras propiedades obligan a recalcular la maquetación en cada fotograma.
Se permiten rotaciones de más de 360deg y son importantes en las animaciones: rotate(720deg) da dos vueltas cuando se anima desde 0.
Añade will-change: transform solo a los elementos que están a punto de animarse y luego quítalo. Dejarlo en todas partes consume memoria.
Preguntas frecuentes
¿Por qué importa el orden de las funciones de transformación?
Cada función cambia el sistema de coordenadas de las que están escritas antes que ella, así que en la práctica la lista se aplica de derecha a izquierda. translate(100px) rotate(45deg) gira la caja y luego la desliza en línea recta hacia la derecha, mientras que rotate(45deg) translate(100px) la desliza a lo largo del eje girado, en diagonal.
¿Cuál es la diferencia entre transform: rotate() y la propiedad rotate?
Las propiedades rotate, scale y translate son versiones independientes de las mismas funciones. Se pueden definir y animar por separado, así que un scale al pasar el ratón no borra una rotación definida en otro sitio. El navegador aplica primero translate, después rotate, luego scale y por último lo que haya en transform.
¿Afecta transform a la maquetación o a otros elementos?
No. El elemento conserva su caja original en la maquetación y los vecinos no se mueven. Solo cambia su imagen pintada. Un elemento transformado sí crea un nuevo contexto de apilamiento y se convierte en el bloque contenedor de los descendientes con posición fija, lo que puede darte sorpresas con los modales.
¿Cómo volteo un elemento en horizontal?
Usa transform: scaleX(-1) o la propiedad scale con scale: -1 1. Refleja el elemento alrededor de su origen, que por defecto es el centro. Para un giro 3D que muestre una cara trasera, rota alrededor del eje Y dentro de un padre con perspective.
¿Por qué mi texto transformado se ve borroso?
Las traslaciones con fracciones y algunos valores de scale colocan los glifos entre píxeles, lo que los suaviza, sobre todo mientras se ejecuta una animación. Redondear los valores de translate a píxeles enteros y escalar hasta el tamaño final en vez de ampliar desde uno más pequeño suele dar un resultado más nítido.
Cómo leer una lista de transformaciones
Un modelo mental útil: empieza por la última función y ve hacia atrás hasta la primera, cada vez moviendo, girando o estirando el elemento en su marco actual, ya alterado. Si un resultado parece incorrecto, invertir la lista suele ser la solución.
Los porcentajes dentro de translate() miden la propia caja de borde del elemento. Por eso translate(-50%, -50%) centra una caja cuyo tamaño no conoces de antemano.
Por qué las transformaciones se animan con fluidez
Los navegadores renderizan una página por etapas: estilo, maquetación, pintado y composición. Cambiar top o width vuelve a ejecutar la maquetación del elemento y a menudo la de sus vecinos. Cambiar transform u opacity normalmente puede saltar directamente a la composición, donde una capa ya pintada se mueve en el procesador gráfico.
Ese es el motivo por el que las guías de movimiento siempre señalan estas dos propiedades. Si una animación pierde fotogramas, abre el panel de rendimiento del navegador y busca trabajo de maquetación y pintado dentro de cada fotograma.
El 3D en un párrafo
Dale perspective al padre, por ejemplo 800px, para que los hijos girados en X o Y parezcan alejarse. Los números más pequeños exageran la profundidad. transform-style: preserve-3d permite que los hijos anidados compartan ese espacio 3D, y backface-visibility: hidden oculta una cara cuando se da la vuelta, que es la base de cualquier giro de tarjeta.
Todas las funciones de transformación
Funciones de transformación 2D y 3D con sus utilidades de Tailwind
Función
Qué hace
Tailwind (v3 y v4 salvo que se indique)
translate(x, y)
Desplaza en X e Y
translate-x-4, -translate-y-2, translate-x-[13px]
translateX() / translateY()
Desplaza en un solo eje
translate-x-1/2, translate-y-full
translateZ(z)
Acerca o aleja del espectador (necesita perspective)
translate-z-4 (v4)
rotate(a)
Gira en sentido horario un ángulo (deg, turn, rad)
rotate-45, -rotate-12, rotate-[17deg]
rotateX(a) / rotateY(a)
Inclina en 3D alrededor del eje horizontal o vertical
rotate-x-45, rotate-y-180 (v4)
scale(s) / scale(x, y)
Agranda o encoge; un valor negativo refleja
scale-110, scale-x-75, -scale-x-100
skew(x, y) / skewX() / skewY()
Inclina el elemento
skew-x-6, -skew-y-3
matrix(a, b, c, d, e, f)
Todas las transformaciones 2D en una matriz
arbitrario: [transform:matrix(...)]
perspective(d)
Profundidad solo para este elemento
perspective-[800px] en el padre (v4)
Orden de las operaciones
Las mismas dos funciones en otro orden dejan la caja en otro sitio. Las dos cajas azules empiezan en el mismo punto.
translate y luego rotate, frente a rotate y luego translate
En la primera caja, el desplazamiento se hace a lo largo del eje X de la pantalla. En la segunda, el desplazamiento sigue el eje girado, así que la caja acaba más abajo.
Las propiedades individuales no se sobrescriben entre sí
La regla de hover solo toca scale, así que el rotate definido en la regla base se mantiene. Con la forma abreviada transform tendrías que repetir rotate(-3deg) dentro de :hover.
La misma rotación, tres orígenes
El origen es el punto que se queda fijo. center es el valor por defecto; top left hace girar la caja como una puerta con la bisagra en la esquina.
Giro de tarjeta en 3D
Pasa el ratón o enfoca para girar (solo CSS)
perspective en el contenedor da profundidad, preserve-3d mantiene las dos caras en un mismo espacio 3D y backface-visibility oculta la cara que queda de espaldas. Quienes piden movimiento reducido ven un cambio instantáneo.
Combinar transformaciones con transiciones
Elevación al pasar el ratón para tarjetas y botones
Solo cambian transform y box-shadow, y el movimiento se desactiva para quienes piden menos movimiento.
La misma idea en Tailwind
motion-safe: aplica el movimiento al pasar el ratón solo cuando el lector no ha pedido movimiento reducido.
Qué es barato de animar
Trabajo de renderizado que provoca el cambio de una propiedad (comportamiento típico del navegador)
Propiedad
Maquetación
Pintado
Solo composición
transform, translate, rotate, scale
No
No (normalmente)
Sí
No
No (normalmente)
Sí
background-color, color, box-shadow
No
Sí
No
width, height, top, left, margin
Sí
Sí
No
(sin transformación)
Área de pruebas de transformaciones
Estilo de salida
forma abreviada transform
propiedades individuales
Restablecer
Tarjeta
Contorno discontinuo: dónde está la tarjeta en la maquetación. Punto oscuro: el transform-origin.