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

cssselektor {
  transform: rotate(hoek);
}

Voorbeeld

In hierdie voorbeeld is die blok 30 grade met die wysers van die klok mee gedraai:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate(1turn);
}

Результат:

Sien ook