Функција 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