Funktionen rotateZ

Funktionen rotateZ anger rotation runt Z-axeln i tredimensionellt utrymme. 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 sker runt punkten som anges av egenskapen transform-origin.

Syntax

cssselector {
  transform: rotateZ(vinkel);
}

Exempel

I detta exempel kommer elementet att rotera 180 grader runt Z-axeln vid hovring. 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: rotateZ(180deg);
}

Результат:

Exempel

Låt oss ändra rotationsaxeln med hjälp av egenskapen transform-origin:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateZ(180deg);
}

Результат:

Se även