Функция rotate3d

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

:

Смотрите также

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