Saltar al contenido principal
Codigo Heroe
Tarea anterior
Transformaciones 2D8/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

Combinación de rotate y translate

Al salir del laberinto, Pendalf entra en una caverna de techo alto. Dos puntos rojos lo observan desde la oscuridad. «Esto no parece una buena señal», piensa, y enciende una bola de fuego…

A la luz del fuego descubre una criatura enorme y peluda. Parece que no ha almorzado y mira al mago con mucho interés. ¡No queda más remedio que defenderse!

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <title>Combinación de rotate y translate</title> <meta charset="utf-8"> <link rel="stylesheet" href="world.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="world underworld"> <div class="wizard"> <div class="fireball"></div> </div> <div class="werewolf"></div> </div> </body> </html>
CSS
.wizard { top: 244px; left: 50px; z-index: 11; } .fireball { } .werewolf { }

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
    1. Haz caer al hombre lobo de espaldas con el hechizo transform: rotate.
    2. Lanza una bola de fuego justo al blanco que aparece.
    Codigo Heroe

    © 2023-2026, codigoheroe.com