CSS 2D Transforms - Biến Đổi 2D: Dịch Chuyển, Xoay, Zoom, Xéo

Tạo animation cho phần tử web (di chuyển, xoay, zoom, xéo) làm trang web tương tác hơn. Thuộc tính transform thực hiện các biến đổi 2D.

Tổng Quan CSS 2D Transforms

Khi transform, phần tử không ảnh hưởng layout các phần tử xung quanh (vẫn giữ chỗ gốc), nhưng có thể đè lên chúng.

9 hàm biến đổi 2D chính:

• translate() - Di chuyển
• rotate() - Xoay
• scale(), scaleX(), scaleY() - Zoom
• skew(), skewX(), skewY() - Xéo
• matrix() - Ma trận (gộp tất cả)

Chi Tiết Các Biến Đổi

translate() - Di Chuyển

Di chuyển phần tử từ vị trí hiện tại.

transform: translate(xAxis, yAxis);

Ví dụ: dịch phải 25px, xuống 50px.

div { transform: translate(25px, 50px); background: lightblue; border: 3px solid black; }

So sánh với không có translate: hộp giữ vị trí gốc.

rotate() - Xoay

Xoay theo độ (deg). Giá trị dương = chiều kim đồng hồ, âm = ngược.

transform: rotate(45deg);

div { transform: rotate(45deg); background: lightblue; border: 3px solid black; }

scale() - Zoom Tỷ Lệ

Zoom chiều rộng (x) và cao (y) theo tỷ lệ. Nếu chỉ 1 giá trị → x = y.

transform: scale(x, y);

Ví dụ: zoom 1.5x.

div { transform: scale(1.5, 1.5); background: lightblue; border: 3px solid black; }

scaleX() / scaleY() - Zoom Riêng Chiều

• scaleX(1.5): Rộng gấp 1.5 lần
• scaleY(0.5): Cao bằng 1/2

skew() - Xéo

Xéo theo góc độ trên trục x và y.

transform: skew(xValue, yValue); /* đơn vị deg */

Ví dụ: xéo 10deg trục X, 15deg trục Y.

div { transform: skew(10deg, 15deg); background: lightblue; border: 3px solid black; }

skewX() / skewY() - Xéo Riêng Trục

transform: skewX(10deg); /* chỉ xéo trục X */
transform: skewY(10deg); /* chỉ xéo trục Y */

matrix() - Gộp Tất Cả Trong 1 Dòng

6 tham số: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)

Ví dụ: scaleX=1, skewY=10deg, skewX=10deg, scaleY=1.25, translateX=25px, translateY=25px.

div { transform: matrix(1, 10, 10, 1.25, 25, 25); background: lightblue; border: 3px solid black; }

Kết Luận

transform với 9 hàm 2D (translate, rotate, scale, skew, matrix) tạo animation mượt mà. Phần tử transform không làm vỡ layout. Bạn đã sẵn sàng tạo hiệu ứng 2D chuyên nghiệp!