CSS 2D 變換是一種應用廣泛的 CSS 技術，利用該技術我們可以改變元素的位置、大小、旋轉等樣式，從而實現更加豐富的布局效果。下面我們將詳細介紹其中的幾種常用變換方式：

.transform {
/* 位移 */
translate(10px, 20px);
/* 縮放 */
scale(1.2);
/* 旋轉 */
rotate(45deg);
/* 斜切 */
skew(20deg, 10deg);
}

1. 位移變換

CSS 中的 translate() 函數可以實現元素的位移操作，它接受兩個參數，分別表示水平和垂直方向的平移量。例如：

.transform {
/* 向右平移 10 像素，向下平移 20 像素 */
transform: translate(10px, 20px);
}

2. 縮放變換

縮放變換可以改變元素的大小，它們的取值范圍是大于0的數值或百分比。具體而言，scale() 函數接受一個參數，表示元素的縮放比例。例如：

.transform {
/* 水平方向和垂直方向都放大 1.2 倍 */
transform: scale(1.2);
}

3. 旋轉變換

旋轉變換可以繞元素的中心點旋轉一個指定的角度。CSS 中的 rotate() 函數用于實現元素的旋轉操作。具體而言，它接受一個角度值，單位是度或弧度。例如：

.transform {
/* 順時針旋轉 45 度 */
transform: rotate(45deg);
}

4. 斜切變換

斜切變換可以讓元素實現傾斜效果。CSS 中的 skew() 函數用于實現元素的斜切操作，它接受兩個參數，分別表示元素在水平和垂直方向上的傾斜程度。例如：

.transform {
/* 水平方向傾斜 20 度，垂直方向傾斜 10 度 */
transform: skew(20deg, 10deg);
}