CSS 2D Transforms cho phép biến đổi hình học 2D: di chuyển, xoay, scale, skew. Áp dụng qua thuộc tính transform.
Các hàm 2D Transform
| Hàm | Mô tả | Cú pháp | Ví dụ |
|---|---|---|---|
| translate() | Di chuyển X, Y | translate(tx, ty) | translate(50px, 100px) |
| translateX() | Di chuyển X | translateX(tx) | translateX(50px) |
| translateY() | Di chuyển Y | translateY(ty) | translateY(100px) |
| rotate() | Xoay quanh gốc | rotate(angle) | rotate(45deg) |
| scale() | Zoom X, Y | scale(sx, sy) | scale(2, 1.5) |
| scaleX() | Zoom X | scaleX(sx) | scaleX(2) |
| scaleY() | Zoom Y | scaleY(sy) | scaleY(1.5) |
| skew() | Nghiêng X, Y | skew(ax, ay) | skew(20deg, 10deg) |
| skewX() | Nghiêng X | skewX(ax) | skewX(20deg) |
| skewY() | Nghiêng Y | skewY(ay) | skewY(10deg) |
| matrix() | Ma trận 2D (6 giá trị) | matrix(a,b,c,d,e,f) | matrix(1,0,0,1,50,100) |
Ví dụ mã nguồn
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.box {
width: 100px; height: 100px;
background-color: rgb(98, 0, 255);
margin: 20px;
display: inline-block;
color: white;
display: flex; align-items: center; justify-content: center;
font-weight: bold;
transition: transform 0.3s;
}
.rotate { transform: rotate(20deg); }
.translate { transform: translate(30px, 20px); }
.scale { transform: scale(2, 1); margin-left: 70px; }
.skew { transform: skew(20deg); }
.combine { transform: translate(50px, 50px) rotate(30deg) scale(1.2); }
</style>
</head>
<body>
<h1>2D Transform Functions</h1>
<div class="box rotate">ROTATE(20deg)</div>
<div class="box skew">SKEW(20deg)</div>
<div class="box scale">SCALE(2,1)</div>
<div class="box translate">TRANSLATE(30,20)</div>
<div class="box combine">COMBINE</div>
</body>
</html>
Quan trọng: Thứ tự transform
Transform được áp dụng từ phải sang trái (hoặc từ gần element ra ngoài).
/* Thứ tự thực thi: translate → rotate → scale */
transform: translate(50px, 50px) rotate(30deg) scale(1.2);
/* 1. Scale trước (từ gốc) */
/* 2. Rotate quanh gốc mới */
/* 3. Translate đến vị trí cuối */
Transform Origin
Mặc định xoay/scale quanh tâm (50% 50%). Thay đổi:
transform-origin: top left; /* Góc trên trái */
transform-origin: 0 0; /* Tương đương */
transform-origin: 100% 100%; /* Góc dưới phải */
transform-origin: 50px 100px; /* Tọa độ cụ thể */
Hiệu năng
transformđược GPU accelerate (compositor thread)- Không trigger layout/repaint → mượt 60fps
- Kết hợp
will-change: transformcho animation phức tạp