Open In App

Tailwind CSS Transform Origin

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. This class is used to specify the origin of the rotation of an element. It is the point about which an element is rotated. It can be used for both 2D and 3D rotations. In CSS, we can do that by using the CSS transform-origin property.

Transform Origin classes:

  • origin-center: This class is used to set the element’s origin as center.
  • origin-top: This class is used to set the element’s origin as top.
  • origin-top-right: This class is used to set the element’s origin as top-right.
  • origin-right: This class is used to set the element’s origin as right.
  • origin-bottom-right: This class is used to set the element’s origin as bottom-right.
  • origin-bottom: This class is used to set the element’s origin as bottom.
  • origin-bottom-left: This class is used to set the element’s origin as bottom-left.
  • origin-left: This class is used to set the element’s origin as left.
  • origin-top-left: This class is used to set the element’s origin as top-left.

Syntax:

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

Example:

HTML




<!DOCTYPE html> 
<html
<head
    <link href
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold"
       GeeksforGeeks 
    </h1
    <b>Tailwind CSS Transform Origin Class</b
    <div class="bg-green-300 
                mx-16
                p-4
                justify-between 
                grid grid-flow-col"> 
    <div class="bg-yellow-500 w-16 h-16">
    <div class="bg-no-repeat
                w-16 h-16 origin-center
                transform rotate-45" 
        style= 
        "background-image:url( 
    </div
    </div>
    <div class="bg-yellow-500 w-16 h-16">
    <div class="bg-no-repeat 
                w-16 h-16 origin-top-left
                transform rotate-45" 
        style= 
        "background-image:url( 
    </div>
    </div>
    <div class="bg-yellow-500 w-16 h-16">
    <div class="bg-no-repeat 
                w-16 h-16 origin-bottom-right 
                transform rotate-45" 
        style="background-image:url( 
    </div
    </div>
    <div class="bg-yellow-500 w-16 h-16">
    <div class="bg-no-repeat 
                w-16 h-16 origin-left
                transform rotate-45" 
        style="background-image:url( 
    </div>
    </div>
    </div
</body
</html


Output:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads