Thuộc tính transform trong CSS

Định nghĩa và cách sử dụng

Thuộc tính transform áp dụng chuyển đổi 2D hoặc 3D cho phần tử. Thuộc tính này cho phép chúng ta xoay, phóng to, di chuyển hoặc nghiêng phần tử.

Để hiểu rõ hơn về thuộc tính transform, xin xem nàyGiải thích.

Xin xem thêm:

Giáo trình CSS3Chuyển đổi 2D trong CSS3

Giáo trình CSS3Chuyển đổi 3D trong CSS3

Hướng dẫn tham khảo HTML DOMThuộc tính transform

Ví dụ

Chuyển đổi div phần tử:

div
{
transform:rotate(7deg);
}

Thử ngay

Có nhiều ví dụ hơn ở cuối trang.

Ngữ pháp CSS

transform: none|transform-functions;

Giá trị thuộc tính

Giá trị Mô tả Kiểm tra
none Định nghĩa không thực hiện chuyển đổi. Kiểm tra
matrix(n,n,n,n,n,n) Định nghĩa chuyển đổi 2D, sử dụng ma trận có sáu giá trị. Kiểm tra
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Định nghĩa chuyển đổi 3D, sử dụng ma trận 4x4 có 16 giá trị.
translate(x,y) Định nghĩa chuyển đổi 2D. Kiểm tra
translate3d(x,y,z) Định nghĩa chuyển đổi 3D.
translateX(x) Định nghĩa chuyển đổi, chỉ sử dụng giá trị của trục X. Kiểm tra
translateY(y) Định nghĩa chuyển đổi, chỉ sử dụng giá trị của trục Y. Kiểm tra
translateZ(z) Định nghĩa chuyển đổi 3D, chỉ sử dụng giá trị của trục Z.
scale(x,y) Định nghĩa chuyển đổi thu nhỏ 2D. Kiểm tra
scale3d(x,y,z) Định nghĩa chuyển đổi thu nhỏ 3D.
scaleX(x) Định nghĩa chuyển đổi thu nhỏ bằng cách đặt giá trị của trục X. Kiểm tra
scaleY(y) Định nghĩa chuyển đổi thu nhỏ bằng cách đặt giá trị của trục Y. Kiểm tra
scaleZ(z) Định nghĩa chuyển đổi thu nhỏ 3D bằng cách đặt giá trị của trục Z.
rotate(góc) Định nghĩa chuyển đổi xoay 2D, quy định góc trong các tham số. Kiểm tra
rotate3d(x,y,z,góc) Định nghĩa chuyển đổi xoay 3D.
rotateX(góc) Định nghĩa chuyển đổi xoay 3D theo trục X. Kiểm tra
rotateY(góc) Định nghĩa chuyển đổi xoay 3D theo trục Y. Kiểm tra
rotateZ(góc) Định nghĩa chuyển đổi xoay 3D theo trục Z. Kiểm tra
skew(góc-x,góc-y) Định nghĩa chuyển đổi nghiêng 2D theo cả trục X và Y. Kiểm tra
skewX(góc) Định nghĩa chuyển đổi nghiêng 2D theo trục X. Kiểm tra
skewY(góc) Định nghĩa chuyển đổi nghiêng 2D theo trục Y. Kiểm tra
perspective(n) Định nghĩa góc nhìn透视 cho phần tử chuyển đổi 3D. Kiểm tra

Chi tiết kỹ thuật

Giá trị mặc định: none
Di truyền: no
Phiên bản: CSS3
Cú pháp JavaScript: object.style.transform="rotate(7deg)"

Các ví dụ khác

Hình ảnh trên bàn
Ví dụ này minh họa cách tạo hình ảnh Polaroid và xoay hình ảnh.

Hỗ trợ trình duyệt

Số liệu trong bảng注明了完全支持该属性的首个浏览器版本。

Số liệu với tiền tố -webkit-、-moz- hoặc -ms- biểu thị phiên bản đầu tiên sử dụng tiền tố.

thuộc tính Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-