Tailwind CSS Transform Origin

The Transform Origin utilities in Tailwind CSS control the point around which an element is rotated, scaled, or otherwise transformed. They correspond to the CSS transform-origin property and support both 2D and 3D transformations. The following utilities are available in Tailwind CSS v4:

origin-center: Sets the transform origin to the center.
origin-top: Sets the transform origin to the top.
origin-top-right: Sets the transform origin to the top-right corner.
origin-right: Sets the transform origin to the right.
origin-bottom-right: Sets the transform origin to the bottom-right corner.
origin-bottom: Sets the transform origin to the bottom.
origin-bottom-left: Sets the transform origin to the bottom-left corner.
origin-left: Sets the transform origin to the left.
origin-top-left: Sets the transform origin to the top-left corner.
origin-[<value>]: Sets the transform origin to a custom value.
origin-(<custom-property>): Sets the transform origin using a CSS custom property.

Syntax

<element class="origin-{keyword}">...</element>

For a custom value, use origin-[<value>]. For example, origin-[25%_75%] sets the transform origin to 25% horizontally and 75% vertically.

Example: The following example demonstrates how different Transform Origin utilities affect the rotation of elements.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Tailwind CSS Transform Origin</title>
</head>
<!--Driver Code Ends-->

<body class="p-8 text-center">
    <h1 class="mb-4 text-3xl font-bold text-green-700">
        GeeksforGeeks
    </h1>
    <h2 class="mb-10 text-xl font-semibold">
        Tailwind CSS Transform Origin
    </h2>
    <div class="grid grid-cols-2 gap-12 sm:grid-cols-4">
        <div class="flex flex-col items-center gap-6">
            <p class="font-medium">origin-center</p>
            <div class="flex h-32 w-32 items-center justify-center bg-gray-100">
                <div class="h-16 w-16 origin-center rotate-45 bg-green-500"></div>
            </div>
        </div>
        <div class="flex flex-col items-center gap-6">
            <p class="font-medium">origin-top-left</p>
            <div class="flex h-32 w-32 items-center justify-center bg-gray-100">
                <div class="h-16 w-16 origin-top-left rotate-45 bg-blue-500"></div>
            </div>
        </div>
        <div class="flex flex-col items-center gap-6">
            <p class="font-medium">origin-bottom-right</p>
            <div class="flex h-32 w-32 items-center justify-center bg-gray-100">
                <div class="h-16 w-16 origin-bottom-right rotate-45 bg-red-500"></div>
            </div>
        </div>
        <div class="flex flex-col items-center gap-6">
            <p class="font-medium">origin-left</p>
            <div class="flex h-32 w-32 items-center justify-center bg-gray-100">
                <div class="h-16 w-16 origin-left rotate-45 bg-purple-500"></div>
            </div>
        </div>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The page displays four squares rotated by 45 degrees. Each square uses a different transform origin, so the point around which it rotates differs. The light-gray containers make the changes in position easier to observe.

Tailwind CSS Transform Origin

Syntax

Explore