Transformación - Translación CSS
-
transform: translate(100px); : Se mueve 100px a la derecha en el eje X.
-
transform: translate(-100px); : Se mueve 100px a la izquierda en el eje X.
-
transform: translate(100px, 100px); : Se mueve 100px en el eje X y Y.
-
transform: translateX(100px); : Se mueve 100px a la derecha en el eje X.
-
transform: translateY(100px); : Se mueve 100px a la derecha en el eje Y.
-
transform: translateZ(100px); : Se mueve 100px a la derecha en el eje Z (Profundidad)
para esto se necesita una perspectiva.
-
perspective: 200px; : Vemos una perspectiva de profundidad.
-
perspective-origin: top; : Vemos una perspectiva de como si la vieramos desde arriba.
-
perspective-origin: translate3d(x, y, z); : Hacemos una translación 3D en X, Y y Z