Functie rotate
De functie rotate() bepaalt de rotatie van een element
over een opgegeven hoek. Wordt gebruikt in combinatie
met de eigenschap transform.
De waarde is een hoek in elke hoekeenheid.
Een positieve waarde roteert
met de klok mee, een negatieve waarde - tegen de klok in.
De rotatie gebeurt rond het punt dat wordt bepaald door
de eigenschap transform-origin.
Syntaxis
selector {
transform: rotate(hoek);
}
Voorbeeld
In dit voorbeeld is het blok 30
graden met de klok mee geroteerd:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Voorbeeld
In dit voorbeeld is het blok 30
graden tegen de klok in geroteerd:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Voorbeeld
In dit voorbeeld roteert het blok bij hover
met 1 omwenteling, omdat de rotatiewaarde
is ingesteld op 1turn (hetzelfde effect kan worden bereikt
door de rotatiehoek in te stellen op 360deg). Voor
een vloeiende rotatie is de eigenschap
transition toegevoegd:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
