Tidadigi Logo

Tailwind CSS Transform

Lớp 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 để điều khiển hành vi transform của một phần tử. Trong CSS, chúng ta có thể làm điều đó bằng CSS transform property.

Transform Classes:

  • transform: Để thực hiện bất kỳ biến đổi nào bạn phải dùng class này.
  • transform-gpu: Class này giúp chuyển đổi được thực thi trên GPU thay vì CPU. Việc này giúp hiệu năng mượt mà hơn.
  • transform-none: Class này dùng để tắt hiệu ứng biến đổi transform.

Syntax:

<element class="transform-{trans-on}">...</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 Class</b> 
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between 
                grid grid-rows-1 
                grid-flow-col"> 
    
    <div title="bg-left-top"
        class="bg-no-repeat
               w-16 h-16
               my-4 transform skew-y-12" 
        style= 
        "background-image:url( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div> 
    <div title="bg-left"
        class="bg-no-repeat 
               w-16 h-16
               my-4 transform rotate-45" 
        style= 
        "background-image:url( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div> 
    <div title="bg-left-bottom"
        class="bg-no-repeat 
               w-16 h-16 
               my-4 transform scale-50" 
        style="background-image:url( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div> 
    <div title="bg-left-bottom"
        class="bg-no-repeat 
               w-16 h-16 
               my-4 transform translate-x-4 translate-y-4" 
        style="background-image:url( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div>
    </div> 
</body> 
</html>

Output:

tailwind-css-transform
Tailwind CSS transform class

Last Updated : 20/07/2025