Tidadigi Logo

Tailwind CSS Transform Origin

Class này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả thuộc tính đều được bao phủ dưới dạng class. Class này dùng để chỉ định gốc xoay của một phần tử. Đó là điểm mà phần tử sẽ xoay quanh. Nó có thể dùng cho cả phép xoay 2D và 3D. Trong CSS, ta có thể làm điều đó bằng CSS transform-origin property.

Các class Transform Origin:

  • origin-center: Class này dùng để đặt gốc của phần tử ở chính giữa.
  • origin-top: Class này dùng để đặt gốc của phần tử ở phía trên.
  • origin-top-right: Class này dùng để đặt gốc của phần tử ở phía trên bên phải.
  • origin-right: Class này dùng để đặt gốc của phần tử ở bên phải.
  • origin-bottom-right: Class này dùng để đặt gốc của phần tử ở dưới cùng bên phải.
  • origin-bottom: Class này dùng để đặt gốc của phần tử ở phía dưới cùng.
  • origin-bottom-left: Class này dùng để đặt gốc của phần tử ở dưới cùng bên trái.
  • origin-left: Class này dùng để đặt gốc của phần tử ở bên trái.
  • origin-top-left: Class này dùng để đặt gốc của phần tử ở phía trên bên trái.

Cú pháp:

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

Ví dụ:

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( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </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( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </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( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </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( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div>
    </div>
    </div> 
</body> 
</html>

Đầu ra:

tailwind-css-transform-origin
Last Updated : 20/07/2025