iT邦幫忙

2022 iThome 鐵人賽
DAY 17
0
自我挑戰組

從零開始的 Tailwind CSS 學習之旅系列 第 17 篇

Day17 - 變換吧！元素

14th鐵人賽 tailwindcss
830 瀏覽

  • 分享至 

  • xImage
    •  

https://ithelp.ithome.com.tw/upload/images/20220930/20152047dGczuP0EZB.png

變換（Transforms）

透過 transform 屬性藉此變換元素。

Scale（縮放）

  • scale-0
  • scale-50
  • scale-75
  • scale-90
  • scale-95
  • scale-100
  • scale-105
  • scale-110
  • scale-125
  • scale-150

設定縮放元素

  1. scale-{percentage} 可以同時縮放元素。
  2. scale-x-{percentage} 和 scale-y-{percentage} 可以獨立縮放水平或垂直元素。
  3. 默認情況是 scale-100，沒有調整縮放時可省略。

舉個例子：

<div class="flex gap-x-12">
  <div class="bg-gray-300">
    <img src="..." alt="縮小的傑尼龜" class="scale-75">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="原始大小的傑尼龜" class="scale-100">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="放大的傑尼龜" class="scale-125">
  </div>
</div>

.scale-75 {
  --tw-scale-x: .75;
  --tw-scale-y: .75;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-125 {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

https://ithelp.ithome.com.tw/upload/images/20220930/201520474F7zzvxwcU.png

Rotate（旋轉）

  • rotate-0
  • rotate-1
  • rotate-2
  • rotate-3
  • rotate-6
  • rotate-12
  • rotate-45
  • rotate-90
  • rotate-180

設定旋轉元素

藉由 rotate-{angle} 為元素旋轉，默認情況是 rotate-0，沒有調整旋轉時可省略，舉個例子：

<div class="flex gap-x-12">
  <div class="bg-gray-300">
    <img src="..." alt="沒有旋轉的傑尼龜" class="rotate-0">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="旋轉45度的傑尼龜" class="rotate-45">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="旋轉90度的傑尼龜" class="rotate-90">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="旋轉180度的傑尼龜" class="rotate-180">
  </div>
</div>

.rotate-0 {
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

https://ithelp.ithome.com.tw/upload/images/20220930/20152047p4pbAgLcz1.png

平移（Translate）

  • translate-x/y-0
  • translate-x/y-px
  • translate-x/y-0.5
  • translate-x/y-1
  • …
  • translate-x/y-96
  • translate-x/y-1/2
  • translate-x/y-1/3
  • translate-x/y-2/3
  • translate-x/y-1/4
  • translate-x/y-3/4
  • translate-x/y-full

設定平移元素

藉由 translate-x-{amount} 和 translate-y-{amount} 可以獨立平移水平或垂直元素，舉個例子：

<div class="flex gap-x-12">
  <div class="bg-gray-300">
    <img src="..." alt="向上平移的傑尼龜" class="-translate-y-6">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="向右平移的傑尼龜" class="translate-x-4">
  </div>
	<div class="bg-gray-300">
    <img src="..." alt="沒有平移的傑尼龜">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="向下平移的傑尼龜" class="translate-y-6">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="向左平移的傑尼龜" class="-translate-x-4">
  </div>
</div>

.-translate-y-6 {
  --tw-translate-y: -1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-4 {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-6 {
  --tw-translate-y: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-4 {
  --tw-translate-x: -1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

https://ithelp.ithome.com.tw/upload/images/20220930/20152047FYbS8X9uKa.png

Skew（傾斜）

  • skew-x/y-0
  • skew-x/y-1
  • skew-x/y-2
  • skew-x/y-3
  • skew-x/y-6
  • skew-x/y-12

設定傾斜元素

藉由 skew-x-{amount} 和 skew-y-{amount} 可以獨立傾斜水平或垂直元素，舉個例子：

<div class="flex gap-x-12">
  <div class="bg-gray-300">
    <img src="..." alt="向上傾斜的傑尼龜" class="skew-y-12">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="向右傾斜的傑尼龜" class="skew-x-12">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="沒有傾斜的傑尼龜">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="向下傾斜的傑尼龜" class="-skew-y-12">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="向左傾斜的傑尼龜" class="-skew-x-12">
  </div>
</div>

.skew-y-12 {
  --tw-skew-y: 12deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.skew-x-12 {
  --tw-skew-x: 12deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-skew-y-12 {
  --tw-skew-y: -12deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-skew-x-12 {
  --tw-skew-x: -12deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

https://ithelp.ithome.com.tw/upload/images/20220930/20152047hfERGz3zP7.png

變換原點（Transform Origin）

  • origin-center
  • origin-top
  • origin-top-right
  • origin-right
  • origin-bottom-right
  • origin-bottom
  • origin-bottom-left
  • origin-left
  • origin-top-left

更改變換原點

藉由 origin-{keyword} 可以指定元素的變換原點，舉個例子：

<div class="flex gap-x-12">
  <div class="bg-gray-300">
    <img src="..." alt="原點在頂部" class="... origin-top">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="原點在中心" class="... origin-center">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="原點在右下角" class="... origin-bottom-right">
  </div>
</div>

.origin-top {
  transform-origin: top;
}

.origin-center {
  transform-origin: center;
}

.origin-bottom-right {
  transform-origin: bottom right;
}

https://ithelp.ithome.com.tw/upload/images/20220930/201520473ZDePYKRbR.png

使用負值

除了變換原點外，縮放、旋轉、平移與傾斜只要在類名稱前加上破折號即可將其轉換為負值，以縮放為例：

<div class="flex gap-x-12">
  <div class="bg-gray-300">
    <img src="..." alt="縮小版傑尼龜" class="scale-75">
  </div>
  <div class="bg-gray-300">
    <img src="..." alt="負值縮小版傑尼龜" class="-scale-75">
  </div>
</div>

.-scale-75 {
  --tw-scale-x: -.75;
  --tw-scale-y: -.75;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

https://ithelp.ithome.com.tw/upload/images/20220930/20152047HqJYUDmSCc.png

移除變換

除了變換原點外，縮放、旋轉、平移與傾斜藉由 transform-none 即可一次刪除元素上所有轉換。
以縮放加旋轉為例，768px 以上移除變換。

<div class="...">
  <img src="..." alt="縮小又旋轉的傑尼龜" class="scale-75 rotate-45 md:transform-none">
</div>

@media (min-width: 768px)
.md\:transform-none {
  transform: none;
}

codepen 連結

本日重點

  1. 除了變換原點外，縮放、旋轉、平移與傾斜只要在類名稱前加上破折號即可將其轉換為負值。
  2. transform-none 可一次刪除元素上所有轉換。

參考


上一篇
Day16 - 探討網格系統
下一篇
Day18 - 元素與偽類的化學反應
系列文
從零開始的 Tailwind CSS 學習之旅 共 30 篇
  1. 26
    Day26 -【實戰演練】Taiwan NO.1 Tour - 搜尋功能
  2. 27
    Day27 -【實戰演練】Taiwan NO.1 Tour - 景點列表
  3. 28
    Day28 -【實戰演練】Taiwan NO.1 Tour - footer
  4. 29
    Day29 -【實戰演練】Taiwan NO.1 Tour - 景點內頁
  5. 30
    Day30 - 結語
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙