Tidadigi Logo

Tailwind CSS Rotate

Lớp này chấp nhận nhiều giá trị trong tailwind CSS , các thuộc tính được bao phủ dưới dạng class. Lớp này xoay một phần tử dựa trên góc chỉ định. Góc có thể được đặt bằng độ, radian hoặc vòng quay. Trong CSS, chúng ta có thể làm điều đó bằng CSS rotate() function.

Các class Rotate:

  • rotate-0: Class này dùng để không xoay.
  • rotate-1: Class này xoay 1 độ theo chiều kim đồng hồ.
  • rotate-2: Class này xoay 2 độ theo chiều kim đồng hồ.
  • rotate-3: Class này xoay 3 độ theo chiều kim đồng hồ.
  • rotate-6: Class này xoay 6 độ theo chiều kim đồng hồ.
  • rotate-12: Class này xoay 12 độ theo chiều kim đồng hồ.
  • rotate-45: Class này xoay 45 độ theo chiều kim đồng hồ.
  • rotate-90: Class này xoay 90 độ theo chiều kim đồng hồ.
  • rotate-180: Class này xoay 180 độ theo chiều kim đồng hồ.
  • -rotate-1: Class này xoay 1 độ ngược chiều kim đồng hồ.
  • -rotate-2: Class này xoay 2 độ ngược chiều kim đồng hồ.
  • -rotate-3: Class này xoay 3 độ ngược chiều kim đồng hồ.
  • -rotate-6: Class này xoay 6 độ ngược chiều kim đồng hồ.
  • -rotate-12: Class này xoay 12 độ ngược chiều kim đồng hồ.
  • -rotate-45: Class này xoay 45 độ ngược chiều kim đồng hồ.
  • -rotate-90: Class này xoay 90 độ ngược chiều kim đồng hồ.
  • -rotate-180: Class này xoay 180 độ ngược chiều kim đồng hồ.

Cú pháp:

<element class="rotate-{degree}">...</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 Rotate Class</b> 
    <div class="bg-green-300 
                mx-16
                p-4
                justify-between 
                grid grid-flow-col"> 
    <div class="bg-no-repeat
                w-16 h-16 transform rotate-0" 
        style= 
        "background-image:url( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div> 
    <div class="bg-no-repeat 
                w-16 h-16 transform rotate-45" 
        style= 
        "background-image:url( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div>
    <div class="bg-no-repeat 
                w-16 h-16 transform rotate-90" 
        style="background-image:url( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div> 
    <div class="bg-no-repeat 
                w-16 h-16 transform rotate-180" 
        style="background-image:url( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div>
    </div> 
</body> 
</html>

Đầu ra:

tailwind-css-rotate
Last Updated : 20/07/2025