Funktsioon rotate

Funktsioon rotate() määrab elemendi pööramise etteantud nurga võrra. Kasutatakse koos omadusega transform. Omaduse väärtuseks on nurk mis tahes nurgaühikutes. Positiivne väärtus pöörab päripäeva, negatiivne - vastupäeva. Pööramine toimub ümber punkti, mis on määratud omadusega transform-origin.

Süntaks

cssvalija {
  transform: rotate(nurk);
}

Näide

Selles näites on plokk pööratud 30 kraadi võrra päripäeva:

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

css#elem {
  transform: rotate(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Näide

Selles näites on plokk pööratud 30 kraadi võrra vastupäeva:

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

css#elem {
  transform: rotate(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Näide

Selles näites pöördub plokk hiirega viibimisel 1 pöörde võrra, kuna pöörlemise väärtus on määratud kui 1turn (sama efekti saab, kui määrata pöördenurga 360deg). Pöörde sujuvuse jaoks on lisatud omadus transition:

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);
}

Результат:

Vaata ka