Funktionen rotate
Funktionen rotate() roterer et element
med en given vinkel. Den bruges sammen
med egenskaben transform.
Værdien er en vinkel i enhver vinkelenhed. En positiv værdi roterer
med uret, en negativ værdi roterer mod uret.
Rotationen udføres omkring punktet angivet af
egenskaben transform-origin.
Syntaks
selector {
transform: rotate(vinkel);
}
Eksempel
I dette eksempel er blokken roteret 30
grader med uret:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Eksempel
I dette eksempel er blokken roteret 30
grader mod uret:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Eksempel
I dette eksempel roterer blokken ved hover
1 omgang, fordi rotationsværdien
er angivet i 1turn (samme effekt kan opnås
ved at angive rotationsvinklen i 360deg). For
at gøre rotationen glat er egenskaben
transition tilføjet:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
