Funktionen rotate
Funktionen rotate() sätter rotationen av ett element
med en given vinkel. Används tillsammans
med egenskapen transform.
Värdet på egenskapen är en vinkel i någon av enheterna
för vinklar. Ett positivt värde roterar
medurs, ett negativt - moturs.
Rotationen utförs runt en punkt, satt av
egenskapen transform-origin.
Syntax
selector {
transform: rotate(vinkel);
}
Exempel
I detta exempel är blocket roterat 30
grader medurs:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exempel
I detta exempel är blocket roterat 30
grader moturs:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exempel
I detta exempel kommer blocket vid hovring att rotera
1 varv, eftersom rotationsvärdet
är satt i 1turn (samma effekt kan uppnås
genom att sätta rotationsvinkeln till 360deg). För
mjuk rotation har egenskapen
transition lagts till:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
