Saltar al contenido principal
Codigo Heroe
Tarea anterior
Transformaciones 2D7/29
A la lista de tareas
  1. 1. Desplazamiento horizontal con translateX
  2. 2. Desplazamiento vertical con translateY
  3. 3. Desplazamiento en dos ejes con translate
  4. 4. Cambios de tamaño con scale
  5. 5. Rotación y orden de las transformaciones
  6. 6. Combinación de desplazamiento y escala
  7. 7. Recorridos con translate
  8. 8. Combinación de rotate y translate
  9. 9. Inclinación con skewX y skewY
  10. 10. Combinación de escala, desplazamiento y rotación
  11. 11. Reflejos con valores negativos de scale
  12. 12. transform-origin y cambios de escala
  13. 13. Transiciones de escala y transform-origin
  14. 14. transform-origin y rotación
  15. 15. Rotación animada y transform-origin
  16. 16. Centrado con transform: translate
  17. 17. Rotación del título de un bloque
  18. 18. Inclinación y rotación de texto decorativo
  19. 19. Sombras con pseudoelementos y rotate
  20. 20. Efectos al pasar el cursor: rotación de un ícono
  21. 21. Efectos al pasar el cursor: escala y opacidad
  22. 22. Efectos al pasar el cursor: aparición de un ícono
  23. 23. Efectos al pasar el cursor: galería
  24. 24. Cartas superpuestas con rotate
  25. 25. Menú circular: posición y origen de rotación
  26. 26. Menú circular: rotación e inclinación
  27. 27. Menú circular: orientación de los enlaces
  28. 28. Menú circular: forma y recorte
  29. 29. Menú circular: añadir opciones
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Recorridos con translate

De las profundidades de la cueva llegan sonidos aterradores, pero ya no hay vuelta atrás.

Nuestro héroe debe avanzar sin miedo por los pasadizos de piedra hacia esos sonidos.

Pendalf pronuncia el hechizo de levitación y se pone en marcha.

Pista: las coordenadas de los puntos clave del ejercicio son múltiplos de 10.
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <title>Recorridos con translate</title> <meta charset="utf-8"> <link rel="stylesheet" href="world.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="world caveworld"> <div class="wizard levitate"></div> <div class="wall wall-1"></div> <div class="wall wall-2"></div> <div class="wall wall-3"></div> <div class="wall wall-4"></div> <div class="wall wall-5"></div> </div> </body> </html>
CSS
.wizard { top: 344px; left: 10px; } .world { min-width: 570px; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0

    Mueve al mago hacia la salida del laberinto con transform: translate, pasando por estos puntos en orden:

    1. Hasta la primera sombra.
    2. Hasta la segunda sombra.
    3. Hasta la tercera sombra.
    Codigo Heroe

    © 2023-2026, codigoheroe.com