Tailwind CSS 变换 #

<div class="scale-0">缩放 0</div>
<div class="scale-50">缩放 0.5</div>
<div class="scale-75">缩放 0.75</div>
<div class="scale-90">缩放 0.9</div>
<div class="scale-95">缩放 0.95</div>
<div class="scale-100">缩放 1（原始）</div>
<div class="scale-105">缩放 1.05</div>
<div class="scale-110">缩放 1.1</div>
<div class="scale-125">缩放 1.25</div>
<div class="scale-150">缩放 1.5</div>

<div class="scale-x-0">水平缩放 0</div>
<div class="scale-x-50">水平缩放 0.5</div>
<div class="scale-x-100">水平缩放 1</div>
<div class="scale-x-150">水平缩放 1.5</div>

<div class="scale-y-0">垂直缩放 0</div>
<div class="scale-y-50">垂直缩放 0.5</div>
<div class="scale-y-100">垂直缩放 1</div>
<div class="scale-y-150">垂直缩放 1.5</div>

<div class="scale-[1.2]">自定义缩放</div>

<div class="rotate-0">0度</div>
<div class="rotate-1">1度</div>
<div class="rotate-2">2度</div>
<div class="rotate-3">3度</div>
<div class="rotate-6">6度</div>
<div class="rotate-12">12度</div>
<div class="rotate-45">45度</div>
<div class="rotate-90">90度</div>
<div class="rotate-180">180度</div>

<div class="-rotate-1">-1度</div>
<div class="-rotate-2">-2度</div>
<div class="-rotate-3">-3度</div>
<div class="-rotate-6">-6度</div>
<div class="-rotate-12">-12度</div>
<div class="-rotate-45">-45度</div>
<div class="-rotate-90">-90度</div>
<div class="-rotate-180">-180度</div>

<div class="rotate-[30deg]">自定义旋转</div>

<div class="translate-x-0">0</div>
<div class="translate-x-1">0.25rem</div>
<div class="translate-x-2">0.5rem</div>
<div class="translate-x-4">1rem</div>
<div class="translate-x-8">2rem</div>
<div class="translate-x-12">3rem</div>
<div class="translate-x-16">4rem</div>
<div class="translate-x-20">5rem</div>
<div class="translate-x-24">6rem</div>

<!-- 百分比 -->
<div class="translate-x-1/2">50%</div>
<div class="translate-x-full">100%</div>

<!-- 负值 -->
<div class="-translate-x-4">-1rem</div>
<div class="-translate-x-full">-100%</div>

<div class="translate-y-0">0</div>
<div class="translate-y-1">0.25rem</div>
<div class="translate-y-2">0.5rem</div>
<div class="translate-y-4">1rem</div>
<div class="translate-y-8">2rem</div>

<!-- 百分比 -->
<div class="translate-y-1/2">50%</div>
<div class="translate-y-full">100%</div>

<!-- 负值 -->
<div class="-translate-y-4">-1rem</div>
<div class="-translate-y-full">-100%</div>

<div class="translate-x-[50px]">自定义平移</div>

<div class="skew-x-0">0度</div>
<div class="skew-x-1">1度</div>
<div class="skew-x-2">2度</div>
<div class="skew-x-3">3度</div>
<div class="skew-x-6">6度</div>
<div class="skew-x-12">12度</div>

<!-- 负值 -->
<div class="-skew-x-12">-12度</div>

<div class="skew-y-0">0度</div>
<div class="skew-y-1">1度</div>
<div class="skew-y-2">2度</div>
<div class="skew-y-3">3度</div>
<div class="skew-y-6">6度</div>
<div class="skew-y-12">12度</div>

<!-- 负值 -->
<div class="-skew-y-12">-12度</div>

<div class="origin-center">中心</div>
<div class="origin-top">顶部</div>
<div class="origin-top-right">右上</div>
<div class="origin-right">右侧</div>
<div class="origin-bottom-right">右下</div>
<div class="origin-bottom">底部</div>
<div class="origin-bottom-left">左下</div>
<div class="origin-left">左侧</div>
<div class="origin-top-left">左上</div>

<div class="scale-110 rotate-3 -translate-x-2">
  组合多个变换
</div>

<div class="transform-gpu">GPU 加速</div>
<div class="transform-none">重置变换</div>

<div class="hover:scale-105 transition-transform duration-200">
  悬停放大
</div>

<button class="active:scale-95 transition-transform">
  点击缩小
</button>

<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
  完全居中
</div>

<svg class="w-6 h-6 hover:rotate-180 transition-transform duration-300">
  <!-- 图标内容 -->
</svg>

<div class="group hover:scale-105 hover:-translate-y-2 transition-all duration-300">
  <img class="w-full h-48 object-cover" src="image.jpg">
  <div class="p-4">
    <h3 class="font-semibold">卡片标题</h3>
  </div>
</div>

<div class="translate-x-full hover:translate-x-0 transition-transform duration-300">
  从右侧滑入
</div>

<div class="hover:-rotate-2 hover:scale-105 transition-all duration-300">
  悬停倾斜
</div>

<div class="group perspective-1000">
  <div class="transition-transform duration-500 group-hover:rotate-y-180">
    正面
  </div>
</div>

<button class="bg-blue-500 text-white px-6 py-2 rounded hover:scale-105 hover:shadow-lg transition-all duration-200">
  悬停效果
</button>

<svg class="w-6 h-6 animate-spin">
  <!-- 加载图标 -->
</svg>

<div class="group perspective-1000">
  <div class="transform-style-3d transition-transform duration-500 group-hover:rotate-y-12">
    <div class="backface-hidden">
      正面
    </div>
  </div>
</div>