rotate-funktio
rotate()-funktio asettaa elementin kierto
annetun kulman verran. Sitä käytetään yhdessä
transform-ominaisuuden kanssa.
Ominaisuuden arvona on kulma missä tahansa kulmayksikössä. Positiivinen arvo pyörittää
myötäpäivään, negatiivinen - vastapäivään.
Kierto suoritetaan pisteen ympäri, joka määritetään
transform-origin-ominaisuudella.
Syntaksi
valitsija {
transform: rotate(kulma);
}
Esimerkki
Tässä esimerkissä lohko on kiertynyt 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ä lohko on kiertynyt 30
astetta vastapäivään:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Esimerkki
Tässä esimerkissä lohko kääntyy kohdistettaessa
1 kierroksen verran, koska kiertoarvo
on annettu 1turn-yksiköissä (saman vaikutuksen voi saada
antamalla kiertokulman 360deg-yksiköissä).
Kierron sujuvuuden lisäämiseksi on lisätty
transition-ominaisuus:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
