Áp dụng biến đổi 2D/3D cho phần tử với CSS (transform)

Thuộc tính transform

transform cho phép **biến đổi hình học** phần tử: dịch chuyển, xoay, scale, skew (2D) và perspective, rotateX/Y/Z (3D). Không ảnh hưởng layout các phần tử khác (khác với margin/position).

Các hàm biến đổi 2D

Hàm	Mô tả	Ví dụ
`translate(x, y)`	Dịch chuyển	`translate(50px, 100px)`
`translateX(x)`	Dịch ngang	`translateX(50px)`
`translateY(y)`	Dịch dọc	`translateY(100px)`
`rotate(angle)`	Xoay 2D	`rotate(45deg)` / `rotate(-90deg)`
`scale(x, y?)`	Zoom	`scale(1.5)` / `scale(2, 1)`
`scaleX(x)`	Zoom ngang	`scaleX(-1)` (lật ngang)
`scaleY(y)`	Zoom dọc	`scaleY(-1)` (lật dọc)
`skew(x-angle, y-angle?)`	Biến dạng méo	`skew(20deg, 10deg)`
`skewX(angle)`	Méo ngang	`skewX(20deg)`
`skewY(angle)`	Méo dọc	`skewY(10deg)`
`matrix(a,b,c,d,e,f)`	Ma trận 2D (6 giá trị)	Kết hợp tất cả

Ví dụ: Xoay phần tử 10deg

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 200px;
      height: 100px;
      background-color: gray;
      transform: rotate(10deg);  /* Xoay 10 độ theo chiều kim đồng hồ */
      /* transform-origin: center center; */ /* Mặc định: tâm */
    }
  </style>
</head>
<body>
  <h1>Rotation</h1>
  <div>Demo</div>
</body>
</html>

Kết hợp nhiều transform

.box {
  /* Thứ tự QUAN TRỌNG: áp dụng từ phải sang trái */
  transform: translate(50px, 50px) rotate(45deg) scale(1.2);
  /* 1. scale(1.2) -> 2. rotate(45deg) -> 3. translate(50px,50px) */
}

Transform-origin

Điểm neo cho biến đổi (mặc định `center center`):

transform-origin: 0 0;        /* Góc trên-trái */
transform-origin: top left;   /* Tương đương */
transform-origin: 50% 100%;   /* Giữa dưới */
transform-origin: center;     /* Mặc định */

3D Transforms (Khái quát)

.card {
  transform: perspective(1000px) rotateY(45deg);
  /* perspective: khoảng cách mắt nhìn (px) - càng nhỏ càng戏剧 */
}
.transform-3d {
  transform-style: preserve-3d; /* Cho con 3D hiển thị đúng */
  backface-visibility: hidden;  /* Ẩn mặt sau */
}

Lưu ý quan trọng

transform tạo **stacking context** mới (z-index con hoạt động cục bộ).
Không ảnh hưởng `flow layout` - phần tử khác vẫn thấy vị trí cũ.
GPU accelerated (thường) - tốt cho animation (`transform`, `opacity`).
Percentage trong `translate` tính theo **kích thước chính element** (khác % trong top/left tính theo cha).