1. 转换
  2. rotate

转换

rotate

用于旋转元素的实用工具。

类名样式
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-45rotate-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-30rotate-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>] 语法 来设置旋转基于完全自定义的值

<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() 函数。

响应式设计

前缀一个 rotate 实用程序 与断点变体(如 md:)一起使用,以仅在中等medium 屏幕尺寸及以上尺寸应用该实用程序

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

变体文档中了解有关使用变体的更多信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策