Tailwind CSS - Transform Origin


Tailwind CSS Skew is a utility that is used to apply transformation by Specifying an element's origin.

Tailwind CSS Transform Origin Classes

The following is the list of Tailwind CSS Transform Origin Classes that are used to apply transform origin.

Class CSS Properties
origin-center transform-origin: center;
origin-top transform-origin: top;
origin-top-right transform-origin: top right;
origin-right transform-origin: right;
origin-bottom-right transform-origin: bottom right;
origin-bottom transform-origin: bottom;
origin-bottom-left transform-origin: bottom left;
origin-left transform-origin: left;
origin-top-left transform-origin: top left;

Functionality of Tailwind CSS Transform Origin Classes

  • origin-center: This class is used to set the transform origin of an element at the center.
  • origin-top: This class is used to set the transform origin of an element at the top.
  • origin-top-right: This class is used to set the transform origin of an element at the top-right.
  • origin-right: This class is used to set the transform origin of an element at the right.
  • origin-bottom-right: This class is used to set the transform origin of an element at the bottom-right.
  • origin-bottom: This class is used to set the transform origin of an element at the bottom.
  • origin-bottom-left: This class is used to set the transform origin of an element at the bottom-left.
  • origin-left: This class is used to set the transform origin of an element at the left.
  • origin-top-left: This class is used to set the transform origin of an element at the top-left.

Tailwind CSS Transform Origin Example

The following example will illustrate the different transformation of an element based on the specified origin.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-12">
        Tailwind CSS Origin Classes
    </h2>
    <div class="grid grid-cols-3 gap-10">
        <div class="bg-green-100 border-2 w-28">
            <div class="w-28 h-28 p-6 bg-green-500 text-center
                        font-bold text-white text-center font-bold
                        text-white origin-center rotate-45">
                origin-center
            </div>
        </div>
        <div class="bg-green-100 border-2 w-28">
            <div class="w-28 h-28 p-6 bg-green-500 text-center
                        font-bold text-white text-center font-bold
                        text-white origin-top rotate-45 ">
                origin-top
            </div>
        </div>
        <div class="bg-green-100 border-2 w-28">
            <div class="w-28 h-28 p-6 bg-green-500 text-center 
                        font-bold text-white text-center font-bol
                        text-white origin-top-right rotate-45 ">
                origin-top-right
            </div>
        </div>
    </div>
</body>
</html>

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-12">
        Tailwind CSS Origin Classes
    </h2>
    <div class="grid grid-cols-3 gap-10">
        <div class="bg-green-100 border-2 w-28">
            <div class="w-28 h-28 p-6 bg-green-500 text-center
                        font-bold text-white text-center font-bold
                        text-white origin-right rotate-45">
                origin-right
            </div>
        </div>
        <div class="bg-green-100 border-2 w-28">
            <div class="w-28 h-28 p-6 bg-green-500 text-center
                        font-bold text-white text-center font-bold
                        text-white origin-bottom-right rotate-45 ">
                origin-bottom-right
            </div>
        </div>
        <div class="bg-green-100 border-2 w-28">
            <div class="w-28 h-28 p-6 bg-green-500 text-center 
                        font-bold text-white text-center font-bol
                        text-white origin-bottom rotate-45 ">
                origin-bottom
            </div>
        </div>
    </div>
</body>
</html>

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-12">
        Tailwind CSS Origin Classes
    </h2>
    <div class="grid grid-cols-3 gap-10">
        <div class="bg-green-100 border-2 w-28">
            <div class="w-28 h-28 p-6 bg-green-500 text-center
                        font-bold text-white text-center font-bold
                        text-white origin-bottom-left rotate-45">
                origin-bottom-left
            </div>
        </div>
        <div class="bg-green-100 border-2 w-28">
            <div class="w-28 h-28 p-6 bg-green-500 text-center
                        font-bold text-white text-center font-bold
                        text-white origin-left rotate-45 ">
                origin-left
            </div>
        </div>
        <div class="bg-green-100 border-2 w-28">
            <div class="w-28 h-28 p-6 bg-green-500 text-center 
                        font-bold text-white text-center font-bol
                        text-white origin-top-left rotate-45 ">
                origin-top-left
            </div>
        </div>
    </div>
</body>
</html>