Day17 - 變換吧！元素 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 17

自我挑戰組

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

Day17 - 變換吧！元素

14th鐵人賽 tailwindcss

肉鬆

2022-09-30 11:58:58

797 瀏覽

分享至

變換（Transforms）

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

Scale（縮放）

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

設定縮放元素

scale-{percentage} 可以同時縮放元素。
scale-x-{percentage} 和 scale-y-{percentage} 可以獨立縮放水平或垂直元素。
默認情況是 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));
}

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));
}

平移（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));
}

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));
}

變換原點（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;
}

使用負值

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

<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));
}

移除變換

除了變換原點外，縮放、旋轉、平移與傾斜藉由 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 連結

本日重點

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

參考

Tailwind CSS 官網

Day16 - 探討網格系統

Day18 - 元素與偽類的化學反應

系列文

從零開始的 Tailwind CSS 學習之旅共 30 篇

RSS系列文訂閱系列文

6 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

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