Mover, girar, escalar e inclinar una caja sin cambiar el sitio que ocupa en la página.
transform: Aplica una o varias transformaciones, en orden.
Mover, girar, escalar e inclinar una caja sin cambiar el sitio que ocupa en la página. Pasa el ratón por encima de los ejemplos con :hover.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Aplica una o varias transformaciones, en orden: translate() (mover), rotate() (girar), scale() (escalar), skew() (inclinar).
Valores: translateX(2rem), rotate(-5deg), scale(1.1), skewX(10deg), none
Mueve la caja en x, y (y z). Es la propiedad individual: no hace falta escribir transform.
Valores: 2rem, 2rem 1rem, 50% 0
Gira la caja. Propiedad individual.
Valores: 15deg, -0.25turn, x 45deg
Escala la caja. Propiedad individual: un valor (las dos direcciones) o dos.
Valores: 1.2, 1 0.5, -1 1 (espejo)
El punto respecto al que se gira o se escala (por defecto, el centro).
Valores: center, top left, 0 100%
La distancia desde la que se ven los hijos en 3D: cuanto menor, más exagerada la profundidad. Va en el contenedor.
Valores: none, 500px, 1000px
Desde dónde se mira la escena 3D.
Valores: center, left top
Si los hijos de una caja transformada se ven en 3D (preserve-3d) o aplanados.
Valores: flat, preserve-3d
Si se ve la parte de atrás de una caja girada en 3D. Con hidden se hacen tarjetas que se dan la vuelta.
Valores: visible, hidden
📌 Nota. En el resultado no se ve nada: la caja está de espaldas y su parte de atrás está oculta. Cambia hidden por visible.
Mover, girar, escalar e inclinar una caja sin cambiar el sitio que ocupa en la página.
Código del tema: .caja { transform: rotate(-8deg) scale(1.1); }
Mover, girar, escalar e inclinar una caja sin cambiar el sitio que ocupa en la página. Pasa el ratón por encima de los ejemplos con :hover.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Aplica una o varias transformaciones, en orden: translate() (mover), rotate() (girar), scale() (escalar), skew() (inclinar).
Valores: translateX(2rem), rotate(-5deg), scale(1.1), skewX(10deg), none
Mueve la caja en x, y (y z). Es la propiedad individual: no hace falta escribir transform.
Valores: 2rem, 2rem 1rem, 50% 0
Gira la caja. Propiedad individual.
Valores: 15deg, -0.25turn, x 45deg
Escala la caja. Propiedad individual: un valor (las dos direcciones) o dos.
Valores: 1.2, 1 0.5, -1 1 (espejo)
El punto respecto al que se gira o se escala (por defecto, el centro).
Valores: center, top left, 0 100%
La distancia desde la que se ven los hijos en 3D: cuanto menor, más exagerada la profundidad. Va en el contenedor.
Valores: none, 500px, 1000px
Desde dónde se mira la escena 3D.
Valores: center, left top
Si los hijos de una caja transformada se ven en 3D (preserve-3d) o aplanados.
Valores: flat, preserve-3d
Si se ve la parte de atrás de una caja girada en 3D. Con hidden se hacen tarjetas que se dan la vuelta.
Valores: visible, hidden
📌 Nota. En el resultado no se ve nada: la caja está de espaldas y su parte de atrás está oculta. Cambia hidden por visible.