мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Функция rotateX

Функции rotateX задает поворот относительно оси X в трехмерном пространстве Используется совместно со свойством transform. Значением свойства служит угол в любых единицах для углов. Положительное значение поворачивает на нас, отрицательное - от нас. Поворот осуществляется вокруг точки, задаваемой свойством transform-origin.

Синтаксис

селектор { transform: rotateX(угол); }

Пример

В данном примере блок по наведению повернется на 180 градусов по оси X. Для плавности поворота добавлено свойство transition:

<div id="elem">lorem ipsum</div> #elem { border: 3px solid black; width: 100px; height: 50px; transition: transform 3s linear; } #elem:hover { transform: rotateX(180deg); }

:

Пример

Сменим ось вращения с помощью свойства transform-origin:

<div id="elem">lorem ipsum</div> #elem { border: 3px solid black; width: 100px; height: 50px; transition: transform 3s linear; transform-origin: center bottom; } #elem:hover { transform: rotateX(180deg); }

:

Пример

Зададим отрицательный угол:

<div id="elem">lorem ipsum</div> #elem { border: 3px solid black; width: 100px; height: 50px; transition: transform 3s linear; transform-origin: center bottom; } #elem:hover { transform: rotateX(-180deg); }

:

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

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