CSS transform 屬性詳解：打造多樣化的元素變形效果
更新日期： 2024 年 11 月 4 日
在現代網頁設計中，靜態的元素常常無法滿足視覺效果的需求，而 CSS 提供的 transform 屬性讓我們可以輕鬆地實現各種視覺變化，例如旋轉、縮放、移動和傾斜。
transform 為元素添加了維度感與動態效果，使頁面更具吸引力。
本文將介紹 transform 屬性的用法和常見的變形功能，並通過範例來幫助您，了解如何靈活應用這個屬性。
transform 屬性介紹
transform 是 CSS 中的一個強大屬性，可以對元素進行多種變形操作，如移動、旋轉、縮放和傾斜等。
這些變形效果不會影響到元素的實際位置，僅僅是視覺上的變化，適合用於動畫和動態效果。
基本語法
transform: function(value);transform 可以使用多種函數來實現不同的變形效果，例如 translate、rotate、scale 和 skew 等。多個函數可以組合使用，創建複雜的效果。
常見的 transform 函數
translate：移動
translate 函數用於移動元素的位置，根據指定的 x 和 y 軸偏移量進行平移。
translateX 只會影響水平位移，translateY 只會影響垂直位移。
transform: translate(50px, 100px); /* 移動元素 50px 到右方，100px 到下方 */
transform: translateX(50px); /* 僅水平方向移動 */
transform: translateY(100px); /* 僅垂直方向移動 */這種平移效果適合用於元素移動動畫，或在不同情境下改變元素位置。
rotate：旋轉
rotate 用於旋轉元素，根據指定的角度進行順時針或逆時針旋轉，單位為 deg（度數）。
transform: rotate(45deg); /* 順時針旋轉 45 度 */
transform: rotate(-45deg); /* 逆時針旋轉 45 度 */旋轉效果通常搭配過渡動畫，創建旋轉圖標、按鈕或圖片的視覺效果。
scale：縮放
scale 函數用於縮放元素的大小。
scaleX 影響寬度，scaleY 影響高度，而 scale 會同時影響寬度和高度。
1 表示原始大小，大於 1 則放大，介於 0 和 1 則縮小。
transform: scale(1.5); /* 放大 1.5 倍 */
transform: scaleX(2); /* 僅寬度放大 2 倍 */
transform: scaleY(0.5); /* 僅高度縮小至 0.5 倍 */縮放效果常用於按鈕或圖片的懸停（hover）效果，讓使用者操作時有更直觀的視覺反饋。
skew：傾斜
skew 用於傾斜元素，通過指定 x 和 y 軸的角度進行傾斜變形。skewX 影響水平方向，skewY 影響垂直方向。
transform: skew(20deg, 10deg); /* 水平傾斜 20 度，垂直傾斜 10 度 */
transform: skewX(20deg); /* 僅水平傾斜 20 度 */
transform: skewY(10deg); /* 僅垂直傾斜 10 度 */傾斜效果適用於創造錯視效果，或增添卡片和按鈕的視覺趣味。
多重變形
transform 屬性支持多重變形函數的連續使用，可以實現更複雜的效果。
例如，將元素移動、旋轉和縮放同時應用：
transform: translate(50px, 50px) rotate(30deg) scale(1.2);這段代碼將元素移動到右下方 50px、順時針旋轉 30 度 並放大 1.2 倍。
多重變形效果可以根據需求排列組合，從而創建出豐富的動畫效果。
3D 變形
transform 還支持 3D 變形效果，例如 rotateX、rotateY 和 translateZ 等。
這些 3D 變形函數讓元素具有三維空間的視覺效果，但需搭配 perspective 屬性才能更好地展示 3D 效果。
例子：旋轉元素在 3D 空間中
transform: rotateX(45deg) rotateY(30deg);這段代碼會使元素在 X 軸上旋轉 45 度，在 Y 軸上旋轉 30 度，從而產生 3D 視覺效果。3D 變形可以用來創建翻轉卡片、旋轉圖片等特殊動畫。
使用範例
例子 1：按鈕的放大效果
使用 scale 來放大按鈕，增加懸停時的視覺效果：
.button {
width: 100px;
height: 100px;
background: #007bff;
color: white;
transition: transform 0.3s;
}
.button:hover {
transform: scale(1.1);
}當使用者懸停在按鈕上時，按鈕會放大 10%，創造出輕微的彈跳感。
例子 2：旋轉圖標效果
在圖標懸停時，使用 rotate 進行旋轉動畫：
.icon {
display: inline-block;
transition: transform 0.3s;
}
.icon:hover {
transform: rotate(180deg); /* 懸停時旋轉 180 度 */
}這段代碼將圖標設置為懸停時旋轉 180 度的效果，適合用於導航按鈕或操作提示圖標。
例子 3：3D 翻轉卡片效果
在卡片懸停時使用 rotateY 和 perspective 屬性創建 3D 翻轉效果：
<div class="card">
<div class="card-inner">
<div class="card-front">Front Side</div>
<div class="card-back">Back Side</div>
</div>
</div>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.card {
width: 200px;
height: 300px;
perspective: 1000px;
margin: 20px;
}
.card-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease-in-out;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 增加陰影效果 */
border-radius: 10px; /* 加入圓角 */
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
color: #fff;
border-radius: 10px; /* 與內部的圓角保持一致 */
backface-visibility: hidden;
}
.card-front {
background-color: #4a90e2;
}
.card-back {
background-color: #e94e77;
transform: rotateY(180deg);
}
在此例中，卡片懸停時會翻轉 180 度，從而顯示背面。這種 3D 翻轉效果適合於展示卡片背面資訊或產品詳情。
使用注意事項
- 過渡效果：為了讓變形效果更平滑，可以搭配
transition屬性實現過渡動畫，提升使用者體驗。 - 性能考量：
transform屬性經常使用於動畫，但過多的變形操作可能會影響頁面性能，建議適當控制效果的使用。 - 3D 變形與透視：在進行 3D 變形時，需要搭配
perspective屬性設置透視距離，否則 3D 效果不明顯。
結論
CSS transform 是一個強大的屬性，能夠實現移動、旋轉、縮放和傾斜等多種變形效果，並支持創建豐富的 3D 效果。
透過靈活應用 transform 屬性，可以提升頁面的動態感，增強用戶的交互體驗。
無論是按鈕放大、圖標旋轉，還是卡片翻轉，transform 為網頁設計提供了無限的可能性。