Funktsiya rotateZ

rotateZ funktsiyasi uch o'lchovli fazoda Z o'qi atrofida aylantirishni belgilay. U transform xususiyati bilan birgalikda ishlatiladi. Xususiyat qiymati har qanday burchak o'lchov birliklarida ifodalanadi. Musbat qiymat soat yo'nalishi bo'yicha, manfiy esa soat yo'nalishiga teskari aylantiradi. Aylantirish transform-origin xususiyati orqali belgilanadigan nuqta atrofida amalga oshiriladi.

Sintaksis

cssselektor {
  transform: rotateZ(burchak);
}

Misol

Ushbu misolda blok Z o'qi bo'yicha 180 darajaga aylanadi. Aylanishning silliqligi uchun transition xususiyati qo'shildi:

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

Результат:

Misol

Aylanish o'qini transform-origin xususiyati yordamida o'zgartiramiz:

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

Результат:

Shuningdek qarang