# Функция 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`,
  которая задает поворот по трем осям

← →
↑
en ru