rotate3d funktsiyasi

rotate3d funktsiyasi elementni uch o‘lchovli fazoda X, Y, Z o‘qlari bo‘yicha berilgan burchakka aylantiradi. U transform xossasi bilan birgalikda ishlatiladi. Xossa qiymati burchak birliklarida ifodalanadi.

Funktsiya qiymat sifatida vergul bilan ajratilgan 4 parametrni qabul qiladi. Dastlabki uch parametr uch o‘lchovli fazodagi aylanish o‘qining vektorini belgilaydi. To‘rtinchi parametr aylanish burchagini belgilaydi.

Sintaksis

cssselektor {
  transform: rotate3d(X, Y, Z, burchak);
}

Misol

Ushbu misolda o‘q vektori ekranning o‘ng yuqori burchagiga yo‘naltirilgan:

html<div id="elem">lorem ipsum</div>
css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate3d(1, 1, 0, 180deg);
}

Результат:

Shuningdek ko‘ring

  • rotate funktsiyasi,
    X va Y o‘qlari bo‘yicha aylantirishni belgilaydi
  • rotateX funktsiyasi,
    X o‘qi bo‘yicha aylantirishni belgilaydi
  • rotateY funktsiyasi,
    Y o‘qi bo‘yicha aylantirishni belgilaydi
  • rotateZ funktsiyasi,
    Z o‘qi bo‘yicha aylantirishni belgilaydi