Функция 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);
}

Результат:

Вижте също