Sử dụng thuộc tính transform trong CSS

Tổng quan CSS transform property

transform là thuộc tính cốt lõi cho **biến đổi hình học** (2D/3D) mà không làm thay đổi luồng tài liệu (document flow). Được GPU accelerate - lý tưởng cho animation mượt.

Các hàm transform chính

/* 2D */
transform: translate(50px, 100px);
transform: rotate(45deg);
transform: scale(1.5);
transform: skew(10deg, 5deg);
transform: matrix(1, 0.2, 0.2, 1, 0, 0);

/* 3D */
transform: translate3d(0, 0, 50px);
transform: rotateX(45deg);
transform: rotateY(180deg);  /* Flip card */
transform: rotateZ(45deg);   /* Tương đương rotate() */
transform: perspective(500px) rotateY(45deg);
transform: matrix3d(...);    /* 16 giá trị */

Ví dụ cơ bản: Xoay 10deg

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 200px;
      height: 100px;
      background-color: gray;
      transform: rotate(10deg);
    }
  </style>
</head>
<body>
  <h1>Rotation</h1>
  <div>Demo</div>
</body>
</html>

Thứ tự thực thi (Quan trọng!)

Transform functions áp dụng **từ phải sang trái** (right-to-left):

transform: translate(100px, 0) rotate(45deg);
/* Thực tế: 1. rotate(45deg) -> 2. translate(100px, 0) */
/* Kết quả: xoay rồi mới dịch -> chuyển động cung tròn */

Transform-origin: Điểm neo

.box {
  transform-origin: top left;      /* Xoay quanh góc trên-trái */
  transform-origin: 50% 100%;      /* Xoay quanh giữa dưới */
  transform-origin: center center; /* Mặc định */
}

Ứng dụng thực tế phổ biến

Usecase	Transform
Centering tuyệt đối	`top: 50%; left: 50%; transform: translate(-50%, -50%);`
Flip card	`rotateY(180deg)` + `backface-visibility: hidden`
Scale hover	`transform: scale(1.05)` + `transition`
Slide panel	`translateX(-100%)` → `translateX(0)`
Parallax	`translateZ(-1px) scale(2)` + `perspective`
Loading spinner	`animation: spin 1s linear infinite` + `@keyframes spin { to { transform: rotate(360deg); } }`

Performance Tips

Chỉ animate `transform` và `opacity` cho 60fps mượt (GPU).
Tránh animate `width`, `height`, `top`, `left`, `margin` (trigger layout/reflow).
Dùng `will-change: transform` cho animation phức tạp.
`transform: translateZ(0)` hoặc `translate3d(0,0,0)` ép GPU layer (hack cũ, dùng thận trọng).

Lưu ý

transform không hoạt động trên `inline` elements (cần `display: inline-block` hoặc `block`).