# 3.29 效果 - 轉換 transform

transform 2D 轉換效果共有四種，分別是：

* rotate：旋轉
* scale：縮放
* translate：偏移
* skew：傾斜

## rotate 旋轉

一個元素設定旋轉，單位 deg(度數)，然後原點是以元素的中心點來旋轉。度數是正的，就以順時針方向；反之則為逆時針方向。

可以透過 `transform-origin`，來改變旋轉的原點位置，例如以左上角。

元素旋轉後，並不會影響到周圍的元素。

語法：

```css
transform: rotate(20deg);  /* 順時針轉 20 度 */
transform-origin: 50% 50%; /* 這是預設值，元素的中心點 */
```

範例：

{% embed url="<https://codepen.io/carlos411/pen/WNeMjaG>" %}

## scale 縮放

語法：

一個元素設定縮放，預設是 1。可設定大於等於 0 的小數、整數。

可以透過 **`transform-origin`**，來改變縮放的原點，例如以左上角。

元素縮放後，並不會影響到周圍的元素。

```css
transform: scale(1.5);  /* 原來的 1.5 倍 */
transform-origin: 50% 50%; /* 這是預設值，元素的原點 */
```

也可以只針對單一方向來縮放：

```css
transform: scaleX(1.5); /* 水平方向 */
```

```css
transform: scaleY(1.5); /* 垂直方向 */
```

範例：

{% embed url="<https://codepen.io/carlos411/pen/NWKyjoR>" %}

## translate 偏移

設定相對於自己原來的位置，設定要如何水平方向、垂直方向的偏移。

語法：第一個參數是水平方向(x 軸)的偏移，第二個參數是垂直方向(y 軸)的偏移：

```css
transform: translate(20px, 10px); /* 往右移動 20px，往下移動 20px */
```

```css
transform: translate(50%, 50%); /* 往右移動自己寬度的一半，往下移動自機高度的一半 */
```

如果是只想設定其中一個方向就好，可以使用以下語法(`translateX`、`translateY` )：

```css
transform: translateX(10px); /* 設定水平方向偏移，往右移 10px */
```

```css
transform: translateY(50%); /* 設定垂直方向偏移，往下移自己高度的一半 */
```

元素的偏移，並不會影響到周圍的元素。

範例：

{% embed url="<https://codepen.io/carlos411/pen/JjPpOBP>" %}

## skew 傾斜

語法：第一個參數是針對 x 軸方向傾斜，第二個是 y 軸方向傾斜

```css
transform-origin: 0% 0%; /* 改變原點位置 */
transform: skew(10deg, 0deg);
```

假設 `skew(20deg, 0deg)`：

![skew(20deg, 0deg)](/files/-MB2NwAwT2HUq_h7PUbb)

假設 `skew(0deg, 20deg)`：

![skew(0deg, 20deg)](/files/-MB2O2XoyXnfmJ2obq17)

範例：

{% embed url="<https://codepen.io/carlos411/pen/ZEzraww>" %}

### 例：導覽列傾斜

{% embed url="<https://codepen.io/carlos411/pen/OJrLOgY>" %}

## 同時套用多種 transform 效果

不能寫多個 transform，而是寫在同一個 transform，且用**空格**做分隔。

語法：

```css
transform: scale(1.5) rotate(30deg);
```

{% embed url="<https://codepen.io/carlos411/pen/YzKejay>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/html-and-css/3.-css/3.27-xiao-guo-zhuan-huan-transform.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.