rotate-funksie
Die rotate() funksie spesifiseer die rotasie van 'n element
met 'n gegewe hoek. Dit word saam gebruik
met die transform eienskap.
Die waarde van die eienskap is 'n hoek in enige hoekeenhede.
'n Positiewe waarde roteer
met die wysers van die klok mee, 'n negatiewe een - daarteen.
Rotasie word uitgevoer om die punt wat gespesifiseer word deur
die transform-origin eienskap.
Sintaksis
selektor {
transform: rotate(hoek);
}
Voorbeeld
In hierdie voorbeeld is die blok 30
grade met die wysers van die klok mee gedraai:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Voorbeeld
In hierdie voorbeeld is die blok 30
grade teen die wysers van die klok in gedraai:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Voorbeeld
In hierdie voorbeeld sal die blok by aanraking draai
met 1 omwenteling, aangesien die rotasiewaarde
gespesifiseer is in 1turn (dieselfde effek kan verkry word
deur die rotasiehoek as 360deg te spesifiseer). Vir
gladde rotasie is die
transition eienskap bygevoeg:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
