Teoría
Teoría

Combinación de desplazamiento y escala

Llegan noticias inquietantes desde las fronteras del reino: un antiguo mal despertó en las cavernas subterráneas. Alguien debe detenerlo. Pendalf emprende el viaje y repasa los hechizos que podrían servirle en esta peligrosa aventura.

Tras largos días de camino y búsquedas infructuosas, llega a una gran montaña. Allí encuentra una discreta entrada a las cavernas donde se esconde el antiguo mal. «¡Que sea lo que tenga que ser!», piensa Pendalf y se adentra en la montaña.

Lo aprendido empieza a resultarle útil de inmediato.

El orden también importa al combinar scale y un desplazamiento. Si el desplazamiento se escribe después de scale(0.5), su distancia visible se reduce a la mitad.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Combinación de desplazamiento y escala</title> <meta charset="utf-8"> <link rel="stylesheet" href="world.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="world new-world"> <div class="tree"></div> <div class="wizard"></div> <div class="cave"></div> </div> </body> </html>

CSS

.wizard { top: 244px; left: 125px; } .tree { top: 178px; left: 10px; } .world { min-width: 570px; }

ObjetivosRealizado

Mueve al mago 130px hacia adelante.
Reduce su tamaño a la mitad.
Después añade otro desplazamiento hacia adelante con el valor 570px.