Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Transform Origin

Quiz

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>

Print Page