笙亿网络策划

Tailwind CSS 怎么实现元素旋转？

约 4 分钟读完 34 阅
文章导读
上一个 测验 下一个 Tailwind CSS rotate 是一个用于通过旋转元素来应用 transform 的实用类。
📋 目录
  1. Ⅰ Tailwind CSS Rotate 类
  2. Ⅱ Tailwind CSS Rotate 类的功能
  3. Ⅲ Tailwind CSS Transform 示例
  4. Ⅳ 设置元素的旋转 Transform
A A

Tailwind CSS - 旋转

上一个
测验
下一个

Tailwind CSS rotate 是一个用于通过旋转元素来应用 transform 的实用类。

Tailwind CSS Rotate 类

以下是用于应用旋转 transform 的 Tailwind CSS Rotate 类列表

Class CSS Properties
rotate-0 transform: rotate(0deg);
rotate-1 transform: rotate(1deg);
rotate-2 transform: rotate(2deg);
rotate-3 transform: rotate(3deg);
rotate-6 transform: rotate(6deg);
rotate-12 transform: rotate(12deg);
rotate-45 transform: rotate(45deg);
rotate-90 transform: rotate(90deg);
rotate-180 transform: rotate(180deg);

Tailwind CSS Rotate 类的功能

  • rotate-*：用于按特定度数旋转元素的类。{*} 这里指定了可以根据需要设置的不同旋转度数。

Tailwind CSS Transform 示例

以下示例将演示元素的各种 transform。

设置元素的旋转 Transform

下面的示例演示了 rotate-* 类的使用。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Rotate Class
    </h2>
    <div class="flex gap-6">
        <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                text-white text-center font-bold text-white  
                hover:rotate-45  duration-500 ">
            Hover: rotate-45
        </div>
        <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                text-white text-center font-bold text-white  
                hover:rotate-90 duration-500 ">
            Hover: rotate-90
        </div>
        <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                text-white text-center font-bold text-white  
                hover:rotate-180  duration-500 ">
            Hover: rotate-180
        </div>
    </div>
</body>
</html>