Thuộc tính transform cho phép bạn di chuyển, phóng to/thu nhỏ, xoay, và làm nghiêng một phần tử về mặt thị giác — mà không ảnh hưởng đến layout của tài liệu (các phần tử khác không dịch chuyển). Nó được GPU tăng tốc, làm cho nó lý tưởng cho animation.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* áp dụng từ phải sang trái: scale, rồi rotate, rồi translate */
}
Nhiều hàm được áp dụng tuần tự; thay đổi thứ tự sẽ thay đổi kết quả (xoay rồi dịch khác với dịch rồi xoay).
.icon:hover { transform: scale(1.2); } /* phóng to khi hover nhưng các phần tử lân cận KHÔNG dịch */
Khác với việc thay đổi width/margin, một transform chỉ ảnh hưởng đến diện mạo được vẽ của phần tử, không phải box của nó trong flow — nên các phần tử xung quanh đứng yên và không có reflow. Đây chính là lý do transform mượt mà.
/* căn giữa một phần tử được định vị absolute */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* nâng lên khi hover */
.card:hover { transform: translateY(-4px); }
/* 3D và perspective */
.card { transform: perspective(500px) rotateY(15deg); }
Thủ thuật căn giữa translate(-50%, -50%) rất phổ biến — nó dịch phần tử lùi lại một nửa kích thước của chính nó.
/* ✅ transform + opacity được composited trên GPU — hãy animate những thứ này */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Vì transform bỏ qua layout và paint (chỉ compositing), animate chúng giữ ở 60fps — rẻ hơn nhiều so với animate vị trí/kích thước.
Transform là công cụ chủ lực của CSS animation và micro-interaction (nâng khi hover, modal, carousel, loading spinner).
Chúng di chuyển/phóng to/xoay mà không kích hoạt layout, nên vừa mạnh vừa hiệu năng tốt — cách được khuyến nghị để animate chuyển động trên web.