> For the complete documentation index, see [llms.txt](https://jks.gitbook.io/tai-lieu-wordpress/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jks.gitbook.io/tai-lieu-wordpress/chuong-2-frontend-co-ban/kien-thuc-css/thay-doi-hinh-dang-voi-transform-va-transform-origin.md).

# Thay đổi hình dạng với transform và transform-origin

Ngoài thuộc tính `transition` của CSS3 giúp bạn tạo ra các hiệu ứng chuyển động của các phần tử trong website, thì nó còn một thuộc tính khác được sử dụng kèm với `transition` rất thường xuyên đó là thuộc tính `transform` có chức năng đổi hình dạng các phần tử block trong website.

### Thay đổi hình dạng với transform

Với transform, bạn có thể xoay, co giãn kích thước hoặc bóp nghiêng hình dạng một phần tử. Ngoài ra nó cũng còn một số tính năng khác cũng liên quan đến việc làm thay đổi hình dạng.

Cách viết:

```css
transform: function( value );
-moz-transform: function( value );
-webkit-transform: function( value );
```

Trong đó, `function()` là tên hàm làm thay đổi hình dạng và value là giá trị của hàm, mỗi hàm có thể sẽ có cách viết giá trị khác nhau.

Về các hàm làm thay đổi hình dạng cho transform thì có rất nhiều nhưng mình chỉ nói qua một số hàm đơn giản thường dùng nhất.

![](https://1969157529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yN44WNdRdbv3lgY8XRE%2Fuploads%2FjS7OG8GXJbH0Aa88NnH7%2Fimage.png?alt=media\&token=14690101-34b9-4be8-939d-984bb626af1a)

Các hàm chuyển động của transform

### **Xoay – `rotate()`**

Với hàm `rotate()` bạn có thể thiết lập một đối tượng bị xoay theo độ góc. Ở hàm này bạn có thể thiết lập giá trị kiểu  `[n]deg` (thiết lập giá trị góc, tức là độ) hoặc `[n]turn` (1 turn = 360 độ). Bạn hãy xem ví dụ live dưới đây để hiểu hơn.

{% embed url="<https://codepen.io/huykira/pen/BarxgoB>" %}
Ví dụ về **`rotate`**
{% endembed %}

### **Co giãn – `scale()`**

Với hàm `scale()` bạn có thể thiết lập co giãn kích thước của một phần tử dựa vào trục y (trục thẳng đứng) và trục x (trục ngang), và hàm này bạn sẽ thiết lập là `scale(X)` hoặc s`caleX()` và `scaleY()`.

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

### **Kéo nghiêng – skew()**

Bạn có thể kéo một đối tượng nghiêng dựa theo trục Y và trục X với hàm `skewX()` và `skewY()`, giá trị bên trong là số `[n]deg` tương tự `rotate()`.

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

### Tùy chỉnh tâm hình dạng với transform-origin

Một thuộc tính thú vị nữa mà bạn có thể dùng kèm theo transform đó là `transform-origin`, nó sẽ cho phép bạn dịch chuyển phần tử dựa vào kiểu thay đổi hình dạng ở `transform`. Nói nghe có vẻ khó hiểu, ví dụ bạn sử dụng `rotate()` để xoay ảnh và khi dùng thêm `transform-origin` thì nó sẽ cho phép bạn chỉnh độ lớn của vòng xoay tính từ tâm phần tử. Thuộc tính `transform-origin` phải được dùng kèm với `transform` và có thể áp dụng cho bất kỳ hàm nào.

Thuộc tính `transform-origin` có hai giá trị là X (phương thẳng đứng) và Y (phương nằm ngang) và giá trị nó sẽ dựa vào kích thước của phần tử.

```
transform-origin: 100% 50%;
```

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