Teoría
Teoría

Desplazamiento vertical con translateY

Ahora probemos a mover objetos en vertical.

Para eso usaremos translateY, una función parecida a la del desplazamiento horizontal:

transform: translateY(-100px)

Esta función mueve el objeto 100 píxeles hacia arriba. Fíjate en que, para subir, usamos un valor negativo.

Como viste en el ejercicio anterior, un objeto puede tener varias funciones de transformación a la vez. Basta con escribirlas separadas por espacios como valor de la propiedad transform:

transform: translateY(-100px) translateX(100px)

Esta transformación mueve el objeto 100 píxeles hacia la derecha y 100 hacia arriba.

Intentemos transportar al mago por el aire combinando desplazamientos horizontales y verticales.

¡Y no olvidemos pronunciar el hechizo de levitación para que pueda volar!

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Desplazamiento vertical con translateY</title> <meta charset="utf-8"> <link rel="stylesheet" href="world.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="world"> <div class="wizard"></div> <div class="tree"></div> </div> </body> </html>

CSS

.wizard { top: 244px; left: 30px; } .tree { top: 178px; left: 170px; }

ObjetivosRealizado

Añade la clase levitate al bloque .wizard para que el mago pueda volar.
Mueve al mago 200px hacia arriba con translateY(-200px).
Hazlo avanzar añadiendo translateX(280px) a la lista de funciones.
Después añade translateY(200px) para que vuelva al suelo.