transform

transform là gì?

transform là thuộc tính cho phép dịch chuyển, thay đổi vị trí, hướng, chiều hoặc xoay thành phần, là một trong những thuộc tính đột phá trong CSS3.

Ứng dụng của transform rất lớn, tạo nên một bước ngoặc trong điều khiển giao diện, trước đây bạn chỉ có thể dùng hình ảnh cho những giao diện xoay trục, 3D hay thậm trí là dịch chuyển, hoặc đơn giản là ứng dụng trong hover thay đổi hình dạng của thành phần,... tất sẽ cả đơn giản hơn khi bạn biết

transform.

Cấu trúc

tag {
    transform: giá trị;
}

Giá trị của transform rất nhiều, bài học này chủ yểu cho bạn biết cách sử dụng nên sẽ giới thiệu vài giá trị thường dùng, những giá trị khác bạn có thể tìm hiểu ở phần tham khảo thuộc tính transform.

Giá trị Đơn vị VD Mô tả
rotate(angle) Độ rotate(45deg) Định nghĩa một phép quay 2D với góc được xác định bởi tham số angle.
rotateX(angle) Độ rotateX(45deg) Định nghĩa một phép quay 3D dọc theo trục X, cần dùng kết hợp với giá trị perspective.
rotateY(angle) Độ rotateY(45deg) Định nghĩa một phép quay 3D dọc theo trục Y, cần dùng kết hợp với giá trị perspective.
rotateZ(angle) Độ rotateZ(45deg) Định nghĩa một phép quay 3D dọc theo trục Z, cần dùng kết hợp với giá trị perspective.
scale(x,y) Số thập phân scale(1.5,2) Xác định một biến đổi tỷ lệ.
scaleX(x) Số thập phân scale(1.5) Xác định một biến đổi tỷ lệ theo trục X.
scaleY(y) Số thập phân scale(1.5) Xác định một biến đổi tỷ lệ theo trục Y.
skew(x-angle,y-angle) Độ skew(10deg,10deg); Xác định sự biến đổi nghiêng 2D dọc theo trục X và Y.
skewX(x-angle) Độ skewX(10deg); Xác định sự biến đổi nghiêng 2D dọc theo trục X.
skewY(y-angle) Độ skewY(10deg); Xác định sự biến đổi nghiêng 2D dọc theo trục Y.
translate(x,y) px, em, ... translate(10px,20px); Xác định một dịch chuyển 2D.
translateX(x) px, em, ... translateX(10px); Xác định một dịch chuyển 2D theo trục X.
translateY(y) px, em, ... translateY(10px); Xác định một dịch chuyển 2D theo trục Y.
perspective(px) px, em, ... perspective(10px); Giá trị cần cho biến đổi 3D.

Cách sử dụng

HTML viết:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>
<p>transform</p>
</div>
</body>
</html>

CSS viết - khi chưa sử dụng transform:

p {
    background: #7ACAFF;
    height: 100px;
    width: 100px;
}

Hiển thị trình duyệt:

transform

Ta sẽ xem xét vài giá trị của transform để hiểu hơn về thuộc tính này nhé:

CSS viết:

p {
    background: #7ACAFF;
    height: 50px;
    transform: rotate(45deg);
    width: 120px;
}

Hiển thị trình duyệt:

transform

Kết quả cho ta thấy, thành phần p hiện tại đã được xoay một góc 45 độ, các bạn xem thêm một vài ví dụ bên dưới nhe:

Ví dụ thêm - Một số transform thường dùng

Dịch chuyển dọc

p {
    background: #7ACAFF;
    height: 50px;
    transform: translateX(100px);
    width: 120px;
}

transform

Biến đổi nghiên theo trục X

p {
    background: #7ACAFF;
    height: 50px;
    transform: skewX(30deg);
    width: 120px;
}

transform

Các giá trị khác, bạn có thể xem thêm tại tham khảo transform hoặc sử dụng công cụ tạo transform để khám phá nhiều tính năng hơn.

animation & @keyframes

transform perspective