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

cssselector {
  transform: rotate(vinkel);
}

Exempel

I detta exempel är blocket roterat 30 grader medurs:

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

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

Результат:

Exempel

I detta exempel är blocket roterat 30 grader moturs:

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

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

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

Результат:

Se även