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 了，透過滑鼠事件可以做一些簡單的微互動效果。以上就是今天的內容，咱們明天見。