Transform 使用

变形基本上分为 Scale (缩放)、Rotate (旋转)、Skew (倾斜)、Translate (平移)。在以往的 Tailwind 中，要写上述四种变形，前面一定要加上 Tranform 这个 Utility，不然没有效果，但在新版中，威尔猪试了不加上 Tranform，Tailwind 依然可以运作，这是不是代表我们的 Class 又可以更精简了，虽然官网还是希望我们要加上 Tranform 就是。

Scale

使元素可放大缩小的变形模式，会依百分比来决定缩放大小，通常会用在图片或按钮的 Hover 效果。使用方式为：scale-{百分比}，同样可以只缩放 X 轴或 Y 轴，写法为：scale-x-{百分比}、scale-y-{百分比}，预设比例如下表：

<div class="w-24 h-24 bg-blue-300 scale-50">scale 50%</div>
<div class="w-24 h-24 bg-blue-300 scale-75">scale 75%</div>
<div class="w-24 h-24 bg-blue-300 scale-100">scale 100%</div>
<div class="w-24 h-24 bg-blue-300 scale-125">scale 125%</div>

scale-100 为该元素正常比例。

Rotate

使元素可旋转的变形模式，会依角度来决定旋转，Tailwind 预设为 -180 度 ～ 180 度，有正负值。使用方式为：rotate-{angle}，如下表：

<div class="w-24 h-24 bg-purple-300 rotate-0">0deg</div>
<div class="w-24 h-24 bg-purple-300 rotate-45">45deg</div>
<div class="w-24 h-24 bg-purple-300 rotate-90">90deg</div>
<div class="w-24 h-24 bg-purple-300 rotate-180">180deg</div>
<div class="w-24 h-24 bg-purple-300 -rotate-90">-90deg</div>
<div class="w-24 h-24 bg-purple-300 -rotate-45">-45deg</div>

rotate 负数为逆时针旋转。

Skew

使元素可倾斜的变形模式，但只限制倾斜 X 轴或 Y轴，会依角度来决定倾斜，Tailwind 预设为 -12 度 ～ 12 度，有正负值。使用方式为：skew-{ x | y }-{angle}，如下表：

<div class="w-24 h-24 bg-yellow-300 skew-x-3">3deg</div>
<div class="w-24 h-24 bg-yellow-300 skew-x-6">6deg</div>
<div class="w-24 h-24 bg-yellow-300 skew-x-12">12deg</div>
<div class="w-24 h-24 bg-blue-300 -skew-y-12">-12deg</div>
<div class="w-24 h-24 bg-blue-300 -skew-y-6">-6deg</div>

Translate

使元素可以平移方向和距离，但只能限定 X 轴或 Y轴，有正负值，使用方式为：translate-{ x | y }-{距离}，预设如下表：

<div class="w-24 h-24 bg-green-300 translate-y-6">6rem</div>
<div class="w-24 h-24 bg-green-300 translate-y-0">0px</div>
<div class="w-24 h-24 bg-green-300 -translate-y-6">-6rem</div>

上述的变形模式都可以自行修改，只要在 theme.{ scale | rotate | skew | translate } 来添加或删除。

Origin

而变形也是会有中心点，一般预设为元素的中央位置，我们当然可以改变中心点在边上，如：上、右、下、左、上左、上右、下左、下右，预设如下表：

威尔猪最常用的应该就是 Scale 和 Translate 了，透过滑鼠事件可以做一些简单的微互动效果。以上就是今天的内容，咱们明天见。