Transform-ominaisuus
Ominaisuus transform asettaa elementin
muunnoksia, kuten kierron,
skaalauksen,
vinouden,
siirron
ja muita. Vastaavat muunnokset kirjoitetaan
välilyönnillä erotettuna:
valitsija {
transform: rotate(30deg) scale(3);
}
Esimerkki
Tässä esimerkissä lohko on käännetty 30
astetta myötäpäivään:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Esimerkki
Tässä esimerkissä kierron lisäksi on lisätty myös vino:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg) skew(20deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Esimerkki
Tässä esimerkissä kierron ja vinouden lisäksi on lisätty myös skaaluksen muutos:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg) skew(20deg) scale(2, 3);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
