Функција rotate3d

Функцијата rotate3d задава ротирање на елемент на зададен агол истовремено во однос на оската X, Y, Z во тродимензионален простор. Се користи заедно со својството transform. Вредноста на својството е агол во какви било единици за агли.

Како вредности функцијата прифаќа 4 параметри, запишани преку запирки. Првите три параметри одредуваат вектор на оската во тродимензионален простор, во однос на која ќе се изврши ротирање. Четвртиот параметар го задава аголот на ротирање.

Синтакса

cssселектор {
  transform: rotate3d(X, Y, Z, агол);
}

Пример

Во овој пример векторот на оската ќе биде насочен во горниот десен агол на екранот:

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

Результат:

Погледнете ги исто така

  • функцијата rotate,
    која задава ротирање по оските X и Y
  • функцијата rotateX,
    која задава ротирање по оската X
  • функцијата rotateY,
    која задава ротирање по оската Y
  • функцијата rotateZ,
    која задава ротирање по оската Z