CSS傾斜效果是一種通過設置旋轉角度和方向來創建傾斜圖像或文本的效果。在 CSS 中，我們可以使用 `transform` 屬性和 `旋轉軸` 屬性來控制旋轉的效果。
下面我們將介紹如何使用 CSS 傾斜效果來創建各種不同類型的傾斜圖像。
1. 水平旋轉
水平旋轉是將文本或圖像向左或向右旋轉 $angle$ 度，其中 $angle$ 是可選參數。以下是一個簡單的示例，演示了如何使用 CSS 水平旋轉效果：
```html
<h1 style="transform: rotateY(-$angle);">向左旋轉</h1>
在這個例子中，`rotateY(-$angle)` 屬性將向左旋轉 $angle$ 度。你可以根據需要調整 $angle$ 的值來創建不同大小的傾斜效果。
2. 垂直旋轉
垂直旋轉是將文本或圖像向下或向上旋轉 $angle$ 度，其中 $angle$ 是可選參數。以下是一個簡單的示例，演示了如何使用 CSS 垂直旋轉效果：
```html
<h1 style="transform: rotateX(-$angle);">向下旋轉</h1>
在這個例子中，`rotateX(-$angle)` 屬性將向下旋轉 $angle$ 度。你可以根據需要調整 $angle$ 的值來創建不同大小的傾斜效果。
3. 旋轉軸
旋轉軸是指旋轉的中心點或線。以下是一個簡單的示例，演示了如何使用 CSS 旋轉效果和旋轉軸來創建傾斜圖像：
```html
<div style="transform: rotateX(-45deg); transform-origin: 50% 100%;">向右旋轉</div>
在這個例子中，`transform: rotateX(-45deg);` 屬性將向右旋轉 45 度，`transform-origin: 50% 100%;` 屬性設置了旋轉中心在 50% 和 100% 之間。
4. 3D 效果
如果你想創建立體的 3D 效果，可以使用 CSS 的 `box-shadow` 屬性和 `transform` 屬性。以下是一個簡單的示例，演示了如何使用 CSS 3D 效果創建傾斜圖像：
```html
<div style="box-shadow: 0px 0px 10px rgba(0,0,0,0.2); transform: rotateY(45deg);">向左旋轉</div>
在這個例子中，`box-shadow` 屬性設置了陰影效果，`transform: rotateY(45deg)` 屬性將向左旋轉 45 度。你可以根據需要調整陰影強度和旋轉角度來創建不同大小的傾斜效果。
CSS 傾斜效果是一種非常有用的工具，可以用于創建各種不同類型的傾斜圖像。通過靈活使用 `transform` 屬性和旋轉軸，我們可以輕松地創建出各種不同的傾斜效果。