CSS
Explica transformaciones 2D y 3D, orden de funciones, transform-origin, matrices y su impacto sobre layout, composición y coordenadas.
Transforms cambian el sistema de coordenadas y la representación visual de una caja sin volver a distribuir normalmente a sus vecinos.
.card:hover {
transform: translateY(-0.25rem);
}transform: translate(1rem, 0);
transform: scale(1.05);
transform: rotate(5deg);
transform: skewX(10deg);Las funciones se aplican en orden y cada una modifica el espacio usado por la siguiente.
transform: translateX(100px) rotate(45deg);no equivale a:
transform: rotate(45deg) translateX(100px);.card {
translate: 0 -0.25rem;
rotate: 2deg;
scale: 1.02;
}Permiten componer cambios sin reescribir toda la lista de transform.
.menu {
transform-origin: top right;
scale: 0.95;
}Define el punto alrededor del cual se aplica la transformación.
.scene {
perspective: 800px;
}
.card {
transform: rotateY(20deg);
transform-style: preserve-3d;
}Perspective controla profundidad aparente. Preserve-3d permite que descendientes mantengan su espacio tridimensional.
.element {
translate: 100% 0;
}El porcentaje se calcula sobre la caja transformada. El espacio original permanece reservado en layout.
Por eso translate no sustituye margins, Grid o Flexbox para distribución permanente.
Un transform distinto de none puede:
Añadir transform: translateZ(0) como truco puede alterar más que rendimiento.
Escalar texto también escala su renderización visual y puede producir borrosidad o tamaños poco legibles. Para typography responsive, cambia font-size o layout.
svg {
transform-box: fill-box;
transform-origin: center;
}Define la caja de referencia, especialmente útil en SVG.
.item {
offset-path: path("M 0 0 C 100 0 100 100 200 100");
offset-distance: 50%;
}Coloca un elemento a lo largo de una ruta. Sigue siendo movimiento visual y requiere reduced-motion.
prefers-reduced-motion.¿Por qué dos listas con translate() y rotate() en orden distinto producen resultados diferentes?
Porque cada función transforma el sistema de coordenadas que utilizará la siguiente.
Transitions interpola cambios entre estados.