Funksjonen rotate
Funksjonen rotate() setter rotasjonen av et element
med en gitt vinkel. Brukes sammen
med egenskapen transform.
Verdien til egenskapen er en vinkel i alle vinkelenheter.
En positiv verdi roterer
med klokken, en negativ verdi - mot klokken.
Rotasjonen utføres rundt punktet som er angitt av
egenskapen transform-origin.
Syntaks
velger {
transform: rotate(vinkel);
}
Eksempel
I dette eksemplet er boksen rotert 30
grader med klokken:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Eksempel
I dette eksemplet er boksen rotert 30
grader mot klokken:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Eksempel
I dette eksemplet vil boksen ved hovering rotere
1 omdreining, siden rotasjonsverdien
er satt til 1turn (samme effekt kan oppnås
hvis rotasjonsvinkelen settes til 360deg). For
jevn rotasjon er egenskapen
transition lagt til:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
