CSS transform có thể làm gì?

Question

IT Interview Practice · Accepted Answer

Thuộc tính `transform` cho phép bạn **di chuyển, phóng to/thu nhỏ, xoay, và làm nghiêng** một phần tử về mặt thị giác — mà không ảnh hưởng đến layout của tài liệu (các phần tử khác không dịch chuyển). Nó được GPU tăng tốc, làm cho nó lý tưởng cho animation.

```css
.box { transform: translate(50px, 20px); }  /* dịch phải 50px, xuống 20px */
.box { transform: scale(1.5); }              /* lớn gấp 1.5 lần (0.5 = một nửa) */
.box { transform: rotate(45deg); }           /* xoay theo chiều kim đồng hồ 45° */
.box { transform: skew(10deg); }             /* làm nghiêng */
```

## Kết hợp transform (thứ tự quan trọng)

```css
.box {
  transform: translateX(100px) rotate(45deg) scale(1.2);
  /* áp dụng từ phải sang trái: scale, rồi rotate, rồi translate */
}
```

Nhiều hàm được áp dụng tuần tự; thay đổi thứ tự sẽ thay đổi kết quả (xoay rồi dịch khác với dịch rồi xoay).

## Tại sao transform không làm xáo trộn layout

```css
.icon:hover { transform: scale(1.2); } /* phóng to khi hover nhưng các phần tử lân cận KHÔNG dịch */
```

Khác với việc thay đổi `width`/`margin`, một transform chỉ ảnh hưởng đến diện mạo *được vẽ* của phần tử, không phải box của nó trong flow — nên các phần tử xung quanh đứng yên và không có reflow. Đây chính là lý do transform mượt mà.

## Các mẫu thường gặp

```css
/* căn giữa một phần tử được định vị absolute */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* nâng lên khi hover */
.card:hover { transform: translateY(-4px); }

/* 3D và perspective */
.card { transform: perspective(500px) rotateY(15deg); }
```

Thủ thuật căn giữa `translate(-50%, -50%)` rất phổ biến — nó dịch phần tử lùi lại một nửa kích thước *của chính nó*.

## Hiệu năng

```css
/* ✅ transform + opacity được composited trên GPU — hãy animate những thứ này */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
```

Vì transform bỏ qua layout và paint (chỉ compositing), animate chúng giữ ở 60fps — rẻ hơn nhiều so với animate vị trí/kích thước.

## Tại sao điều này quan trọng

Transform là công cụ chủ lực của CSS animation và micro-interaction (nâng khi hover, modal, carousel, loading spinner).

Chúng di chuyển/phóng to/xoay mà không kích hoạt layout, nên vừa mạnh vừa hiệu năng tốt — cách được khuyến nghị để animate chuyển động trên web.

Kết hợp transform (thứ tự quan trọng)

Tại sao transform không làm xáo trộn layout

Các mẫu thường gặp

Hiệu năng

Tại sao điều này quan trọng

Câu hỏi liên quan