CSS
HTML
COMPONENTS
CODE HUB
Generador de Translación CSS
Configuración
Valor X
Valor Y
Clase
Vista previa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget cursus felis. Duis sed accumsan tellus, eget cursus nisl.
Código
Aprende a programar con Lara
Domina los conceptos de programación paso a paso con tu tutora de IA interactiva. Lara explica lógicas complejas, revisa tus ejercicios prácticos y te ayuda a construir una base sólida en el desarrollo de software.
Lecciones de programación interactivas adaptadas a tu propio ritmo.
Empezar a aprender con LaraGenerador de Translación CSS
En CSS, la transformación de translación se usa para mover o desplazar un elemento HTML desde su posición original, tanto en espacio 2D como 3D. La transformación de translación se utiliza a menudo como parte de la propiedad transform para crear animaciones, reposicionar elementos o aplicar otros efectos dinámicos.
Aquí está cómo usar la transformación de translación dentro de la propiedad transform:
Translación 2D:
Para trasladar un elemento en el espacio 2D, usas la función translate. Toma uno o dos valores de longitud como argumentos para especificar las translaciones horizontal y vertical.
.translate-element {
transform: translate(20px, 30px);
}
En este ejemplo, la clase .translate-element mueve el elemento 20 píxeles a la derecha y 30 píxeles hacia abajo desde su posición original.
Translación 3D:
Para translaciones 3D, puedes usar las funciones translate3d o translateX, translateY y translateZ para trasladar un elemento en el espacio 3D.
.translate-3d-element {
transform: translate3d(50px, 0, 100px);
}
En este caso, la clase .translate-3d-element traslada el elemento 50 píxeles en el eje X y 100 píxeles en el eje Z en el espacio 3D, manteniendo la translación en el eje Y en 0.
La transformación de translación es una herramienta poderosa para crear efectos dinámicos y animaciones, permitiéndote mover elementos suavemente en la página web. Puedes usarla en combinación con otras transformaciones, como rotación y escalado, para lograr efectos visuales complejos.