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

Reflejos con valores negativos de scale

El perfeccionismo nunca trajo nada bueno. Tras la victoria, Pendalf reconstruyó el cristal roto, que resultó ser una trampa. El espíritu del villano derrotado se apoderó de Pendalf y lo teletransportó a una habitación desconocida.

Durante la teletransportación, el mago descubrió otra particularidad de transform: scale: qué pasa al usar valores negativos. Por ejemplo, scaleX(-1) refleja el objeto horizontalmente, como en un espejo, y scale(-1, -1) lo refleja tanto en X como en Y. Un valor menor que -1 también amplía el objeto reflejado en el eje correspondiente.

Aquí puedes ver algunos ejemplos:

transform: scaleX(1);
transform: scaleX(1);
transform: scaleX(-1);
transform: scaleX(-1);
transform: scale(-1);
transform: scale(-1);
transform: scaleX(-1.5);
transform: scaleX(-1.5);

En el camino, Pendalf también alcanzó a leer el folleto «La batalla contra uno mismo». Entendió que debía retar a su doble a un duelo, pero sin hacerle daño: cualquier herida también lo afectaría a él. No sabía cómo vencerlo, pero ya no podía retroceder. Decidió acabar con el antiguo mal de una vez por todas…

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <title>Reflejos con valores negativos de scale</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="demon"></div> <div class="wizard"></div> <div class="diamond"></div> <div class="doppelganger"></div> </div> </body> </html>
CSS
.wizard { top: 244px; left: 30px; } .doppelganger { visibility: hidden; } .diamond { } .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 doble .doppelganger con visibility: visible y scaleX(-1).
    2. Reduce el cristal .diamond al tamaño adecuado y muévelo hasta encajarlo exactamente en la ranura del cráneo de la pared.
    1. Abre el pergamino y haz lo que muestra el dibujo.
    Codigo Heroe

    © 2023-2026, codigoheroe.com