Alkuperäinen paikka
Muunnettu
Tämä lohko ei siirry mihinkään, koska muunnos ei vaikuta dokumenttivirtaan.
CSS
.rata > div { border: 1px solid #b3261e; padding: 0.5em; background-color: #ffe9a8; } .alkuperainen { opacity: 0.4; /* haalea vertailukohta */ } /* Muunnokset luetaan oikealta vasemmalle: ensin siirto, sitten skaalaus, sitten kierto. Koska skaalaus tulee siirron jälkeen, myös siirtomatka puolittuu: 4em siirtyy todellisuudessa 2em verran. */ .muunnettu { transform: rotate(-10deg) scale(0.5) translate(4em, 2em); transform-origin: center; /* oletusarvo */ background-color: #e6f2eb; } /* Kokeile yksi kerrallaan: transform: rotate(15deg); transform: scale(1.5); transform: translateX(3em); transform: skew(10deg, 5deg); Huomaa, että muunnettu lohko vie edelleen alkuperäisen tilansa: seuraava lohko ei siirry sen tieltä. */
HTML
<div class="rata"> <div class="alkuperainen">Alkuperäinen paikka</div> <div class="muunnettu">Muunnettu</div> <div class="jalkeen">Tämä lohko ei siirry mihinkään, koska muunnos ei vaikuta dokumenttivirtaan.</div> </div>
Javascript
Konsoli