Funktsioon rotateZ

Funktsioon rotateZ määrab pöörde Z-telje suhtes kolmemõõtmelises ruumis. 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: rotateZ(nurk);
}

Näide

Selles näites pöördub plokk hiirekursori alal 180 kraadi võrra Z-telje suhtes. Pöörde sujuvuse lisamiseks 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: rotateZ(180deg);
}

Результат:

Näide

Muudame pöörlemistelge kasutades omadust 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);
}

Результат:

Vaata ka