Saltar al contenido principal
Codigo Heroe
Tarea anterior
Transformaciones 2D10/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 escala, desplazamiento y rotación

Ya estamos en el cuartel general del antiguo mal. Solo falta derrotar al cabecilla para alcanzar la victoria. Por desgracia, las bolas de fuego no bastarán: habrá que invocar a un héroe capaz de darle una buena paliza a ese grandulón…

¡Y, por supuesto, también necesitaremos los hechizos CSS que aprendimos!

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <title>Combinación de escala, desplazamiento y rotación</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> <div class="hero"></div> <div class="overlord"></div> </div> </body> </html>
CSS
.wizard { top: 244px; left: 30px; } .hero { } .overlord { } .summon { display: block; } .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
    1. Invoca al héroe añadiendo la clase summon al bloque .hero.
    2. Amplía al héroe a 1.5 veces su tamaño con scale.
    3. Después añade un desplazamiento hacia adelante con el valor 100px.
    4. Haz caer a .overlord de espaldas con transform: rotate.
    Codigo Heroe

    © 2023-2026, codigoheroe.com