Bài 18. Transform và transition

Transform di chuyển, xoay, co giãn, nghiêng phần tử mà không ảnh hưởng bố cục; transition làm các thay đổi diễn ra mượt mà. Kết hợp hai thuộc tính này tạo ra phần lớn vi tương tác (micro-interaction) trên web.

45 phútTrung cấp
Bạn sẽ học được
  • Dùng translate, rotate, scale, skew (2D)
  • Hiểu transform-origin và 3D: perspective, rotateY
  • Tạo transition: thuộc tính, thời gian, hàm thời gian, độ trễ
  • Tạo hiệu ứng lật thẻ và nút phản hồi
Thuật ngữ cần biết
transform-origin
Tâm của phép biến đổi, mặc định giữa phần tử.
timing function
Đường cong tốc độ: ease, linear, ease-in-out, cubic-bezier.
perspective
Khoảng cách người xem, tạo chiều sâu 3D.

Một số khái niệm

Transform và opacity là hai thuộc tính “rẻ” nhất để tạo chuyển động vì trình duyệt xử lý bằng GPU, không phải tính lại bố cục. Tránh tạo hiệu ứng trên width, height, top, left vì gây giật.

.nut {
  transition: transform .2s ease, background-color .3s;  /* thuộc tính thời-gian hàm độ-trễ */
}
.nut:hover { transform: translateY(-3px) scale(1.03); }
/* Thuộc tính riêng (mới): translate, rotate, scale */
.icon { rotate: 45deg; scale: 1.2; translate: 10px 0; }

Transform 2D

<style>
  .h { display: inline-grid; place-items: center; width: 80px; height: 60px; margin: 18px 10px; background: #1565c0; color: #fff; font-size: 12px; border-radius: 8px; }
  .t1 { transform: translate(10px, -10px); } .t2 { transform: rotate(20deg); } .t3 { transform: scale(1.2); }
  .t4 { transform: skewX(-15deg); } .t5 { transform: rotate(45deg); transform-origin: top left; }
</style>
<div class="h t1">translate</div><div class="h t2">rotate</div><div class="h t3">scale</div><div class="h t4">skew</div><div class="h t5">origin</div>
Kết quả hiển thị

Transition: rê chuột để xem

<style>
  .n { padding: 10px 16px; margin: 6px; border: 0; border-radius: 8px; background: #2e7d32; color: #fff; cursor: pointer; }
  .a1 { transition: transform .2s ease; } .a1:hover { transform: translateY(-4px); }
  .a2 { transition: background-color .4s, letter-spacing .4s; } .a2:hover { background: #e65100; letter-spacing: .1em; }
  .a3 { transition: transform .6s cubic-bezier(.34,1.56,.64,1); } .a3:hover { transform: scale(1.15); }
  .gach { position: relative; text-decoration: none; color: #1565c0; }
  .gach::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
  .gach:hover::after { transform: scaleX(1); }
</style>
<button class="n a1">Nổi lên</button><button class="n a2">Đổi màu</button><button class="n a3">Nảy (bounce)</button>
<p><a class="gach" href="#">Gạch chân chạy từ trái sang</a></p>
Kết quả hiển thị

3D: lật thẻ

<style>
  .lat { width: 200px; height: 120px; perspective: 800px; }
  .mat-trong { position: relative; width: 100%; height: 100%; transition: transform .7s; transform-style: preserve-3d; }
  .lat:hover .mat-trong { transform: rotateY(180deg); }
  .mat { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; backface-visibility: hidden; color: #fff; font-weight: 700; }
  .truoc { background: #2e7d32; } .sau { background: #6a1b9a; transform: rotateY(180deg); }
</style>
<div class="lat"><div class="mat-trong"><div class="mat truoc">Rê chuột: CSS là gì?</div><div class="mat sau">Ngôn ngữ định dạng</div></div></div>
Kết quả hiển thị
Mẹo hay

Đường cong cubic-bezier(.34,1.56,.64,1) tạo hiệu ứng “nảy” nhẹ tự nhiên; tạo đường cong riêng tại cubic-bezier.com.

Lưu ý

Luôn tôn trọng prefers-reduced-motion (bài 15): người bị say chuyển động có thể khó chịu với hiệu ứng xoay, phóng lớn.

Thực hành
  1. Làm thẻ khóa học nổi lên và đổ bóng khi rê chuột.
  2. Làm gạch chân chạy cho menu.
  3. Làm thẻ từ vựng lật mặt trước/sau.
  4. Biểu tượng mũi tên xoay 180° khi mở menu con.
Tóm tắt bài học
  • transform: translate, rotate, scale, skew; transform-origin.
  • transition: thuộc tính thời gian hàm độ trễ.
  • Ưu tiên tạo hiệu ứng trên transform và opacity.
  • perspective + rotateY + backface-visibility cho 3D.