Teoría
Teoría

Desplazamiento en dos ejes con translate

En un peligroso mundo de fantasía, donde puede haber un trol o un hombre lobo a la vuelta de cada esquina, Pendalf debe saber defenderse. Y, como todo mago de combate que se respete sabe, no hay mejor arma de ataque y defensa que las bolas de fuego.

Aprendamos a lanzarlas contra los blancos para proteger a Pendalf cuando aparezcan enemigos.

Usaremos los hechizos de desplazamiento que ya conocemos, translateX y translateY, y otro más breve que reúne el movimiento por ambos ejes en una sola función: translate.

transform: translate(desplazamiento-en-X [, desplazamiento-en-Y])

Los corchetes indican que el desplazamiento en Y es un argumento opcional. No se escriben en el código: los dos valores se separan con una coma y pueden usar unidades diferentes. Si solo escribimos translate(desplazamiento-en-X), el desplazamiento en Y será 0 y la función se comportará como translateX.

/* Estas funciones producen el mismo resultado: */
transform: translate(100px);
transform: translate(100px, 0);
transform: translateX(100px);

¡Es hora de empezar con las prácticas de fuego!

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Desplazamiento en dos ejes con translate</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 class="fireball fireball-1"></div> <div class="fireball fireball-2"></div> <div class="fireball fireball-3"></div> </div> <div class="target target-right"></div> <div class="target target-top-right"></div> <div class="target target-top"></div> </div> </body> </html>

CSS

.fireball-1 { } .fireball-2 { } .fireball-3 { } .wizard { top: 244px; left: 30px; }

ObjetivosRealizado

Usa translateX para mover .fireball-1310px hacia adelante y alcanzar el blanco inferior derecho.
Mueve .fireball-2190px hacia arriba para alcanzar el blanco superior.
Lanza la última bola, .fireball-3, 290px hacia adelante y 190px hacia arriba a la vez, hacia el blanco superior derecho.