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

cssselector {
  transform: rotate(hoek);
}

Voorbeeld

In dit voorbeeld is het blok 30 graden met de klok mee geroteerd:

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

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

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

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

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

Результат:

Zie ook