Transform origin

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 = "transform-origin"; export const description = "Utilities for specifying the origin for an element's transformations.";

)", "transform-origin: var(\);"], ["origin-[\]", "transform-origin: \;"], ]} />

Examples¶

Basic example¶

Use utilities like origin-top and origin-bottom-left to set an element's transform origin:

{

origin-center

origin-top-left

origin-bottom

}

<!-- [!code classes:origin-center,origin-top-left,origin-bottom] -->
<img class="origin-center rotate-45 ..." src="/img/mountains.jpg" />
<img class="origin-top-left rotate-12 ..." src="/img/mountains.jpg" />
<img class="origin-bottom -rotate-12 ..." src="/img/mountains.jpg" />

Transform origin

Examples¶

Basic example¶

Using a custom value¶

Responsive design¶