1. Трансформации
  2. rotate

Трансформации

rotate

Утилиты для поворота элементов.

ClassStyles
rotate-none
rotate: none;
rotate-<number>
rotate: <number>deg;
-rotate-<number>
rotate: calc(<number>deg * -1);
rotate-(<custom-property>)
rotate: var(<custom-property>);
rotate-[<value>]
rotate: <value>;
rotate-x-<number>
transform: rotateX(<number>deg) var(--tw-rotate-y);
-rotate-x-<number>
transform: rotateX(-<number>deg) var(--tw-rotate-y);
rotate-x-(<custom-property>)
transform: rotateX(var(<custom-property>)) var(--tw-rotate-y);
rotate-x-[<value>]
transform: rotateX(<value>) var(--tw-rotate-y);
rotate-y-<number>
transform: var(--tw-rotate-x) rotateY(<number>deg);

Примеры

Базовый пример

Используйте утилиты rotate-<number>, такие как rotate-45 и rotate-90, чтобы повернуть элемент на заданное количество градусов:

rotate-45

rotate-90

rotate-210

<img class="rotate-45 ..." src="/img/mountains.jpg" /><img class="rotate-90 ..." src="/img/mountains.jpg" /><img class="rotate-210 ..." src="/img/mountains.jpg" />

Использование отрицательных значений

Используйте утилиты -rotate-<number>, такие как -rotate-45 и -rotate-90, чтобы повернуть элемент против часовой стрелки на заданное количество градусов:

-rotate-45

-rotate-90

-rotate-210

<img class="-rotate-45 ..." src="/img/mountains.jpg" /><img class="-rotate-90 ..." src="/img/mountains.jpg" /><img class="-rotate-210 ..." src="/img/mountains.jpg" />

Поворот в 3D пространстве

Используйте утилиты rotate-x-<number>, rotate-y-<number>, и rotate-z-<number>, такие как rotate-x-50, -rotate-y-30 и rotate-z-45, чтобы повернуть элемент в 3D пространстве:

rotate-x-50

rotate-z-45

rotate-x-15

-rotate-y-30

rotate-y-25

rotate-z-30

<img class="rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" /><img class="rotate-x-15 -rotate-y-30 ..." src="/img/mountains.jpg" /><img class="rotate-y-25 rotate-z-30 ..." src="/img/mountains.jpg" />

Использование пользовательского значения

Используйте синтаксис rotate-[<value>] , чтобы задать rotation на основе полностью пользовательского значения:

<img class="rotate-[3.142rad] ..." src="/img/mountains.jpg" />

Для переменных CSS вы также можете использовать синтаксис: rotate-(<custom-property>)

<img class="rotate-(--my-rotation) ..." src="/img/mountains.jpg" />

Это просто сокращение, rotate-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a rotate утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<img class="rotate-45 md:rotate-60 ..." src="/img/mountains.jpg" />

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков