src/docs/rotate.mdx
import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
export const title = "rotate"; export const description = "Utilities for rotating elements.";
<ApiTable
rows={[
["rotate-none", "rotate: none;"],
...[["rotate"]].flatMap(([prefix]) => [
[${prefix}-<number>, rotate: <number>deg;],
[-${prefix}-<number>, rotate: calc(<number>deg * -1);],
[${prefix}-(<custom-property>), rotate: var(<custom-property>);],
[${prefix}-[<value>], rotate: <value>;],
]),
...[
["rotate-x", (value) => rotateX(${value}) var(--tw-rotate-y)],
["rotate-y", (value) => var(--tw-rotate-x) rotateY(${value})],
["rotate-z", (value) => var(--tw-rotate-x) var(--tw-rotate-y) rotateZ(${value})],
].flatMap(([prefix, getTransform]) => [
[${prefix}-<number>, transform: ${getTransform("<number>deg")};],
[-${prefix}-<number>, transform: ${getTransform("-<number>deg")};],
[${prefix}-(<custom-property>), transform: ${getTransform("var(<custom-property>)")};],
[${prefix}-[<value>], transform: ${getTransform("<value>")};],
]),
]}
/>
Use rotate-<number> utilities like rotate-45 and rotate-90 to rotate an element by degrees:
</div>
<div className="relative z-10 rotate-45">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rotate-90</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 rotate-90">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rotate-210</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 rotate-210">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
</div>
</div>
} </Example>
<!-- [!code classes:rotate-45,rotate-90,rotate-210] -->
Use -rotate-<number> utilities like -rotate-45 and -rotate-90 to rotate an element counterclockwise by degrees:
</div>
<div className="relative z-10 -rotate-45">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">-rotate-90</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 -rotate-90">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">-rotate-210</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 -rotate-210">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
</div>
</div>
} </Example>
<!-- [!code classes:-rotate-45,-rotate-90,-rotate-210] -->
Use rotate-x-<number>, rotate-y-<number>, and rotate-z-<number> utilities like rotate-x-50, -rotate-y-30, and rotate-z-45 together to rotate an element in 3D space:
</div>
<div className="relative z-10 rotate-x-50 rotate-z-45">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rotate-x-15</p>
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
-rotate-y-30
</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 rotate-x-15 -rotate-y-30">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-center">
<p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rotate-y-25</p>
<p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rotate-z-30</p>
<div className="relative">
<div className="absolute inset-0">
</div>
<div className="relative z-10 rotate-y-25 rotate-z-30">
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
</div>
</div>
</div>
</div>
</div>
} </Example>
<!-- [!code classes:rotate-y-25,rotate-z-30,rotate-x-15,-rotate-y-30,rotate-x-50 rotate-z-45] -->
<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="rotate" value="3.142rad" name="rotation" variable="rotation" />
<ResponsiveDesign element="img" elementAttributes={{ src: "/img/mountains.jpg" }} property="rotate" defaultClass="rotate-45" featuredClass="rotate-60" />