Funktsioon rotate
Funktsioon rotate() määrab elemendi pööramise
etteantud nurga võrra. Kasutatakse koos
omadusega transform.
Omaduse väärtuseks on nurk mis tahes nurgaühikutes.
Positiivne väärtus pöörab
päripäeva, negatiivne - vastupäeva.
Pööramine toimub ümber punkti, mis on määratud
omadusega transform-origin.
Süntaks
valija {
transform: rotate(nurk);
}
Näide
Selles näites on plokk pööratud 30
kraadi võrra päripäeva:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Näide
Selles näites on plokk pööratud 30
kraadi võrra vastupäeva:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Näide
Selles näites pöördub plokk hiirega viibimisel
1 pöörde võrra, kuna pöörlemise väärtus
on määratud kui 1turn (sama efekti saab,
kui määrata pöördenurga 360deg).
Pöörde sujuvuse jaoks on lisatud omadus
transition:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
