Функция rotate3d
задает поворот элемента
на заданный угол одновременно относительно
оси X, Y, Z в трехмерном пространстве. Используется
совместно со свойством transform
.
Значением свойства служит угол в любых единицах
для углов.
В качестве значений функция принимает 4
параметра, записанные через запятые. Первые
три параметра определяют вектор оси в трехмерном
пространстве, относительного которой будет
осуществляться поворот. Четвертый параметр
задает угол поворота.
Синтаксис
селектор {
transform: rotate3d(X, Y, Z, угол);
}
Пример
В данном примере вектор оси будет направлен в правый верхний угол экрана:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate3d(1, 1, 0, 180deg);
}
: