Thuộc tính transform của Style

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

transform Thuộc tính áp dụng chuyển đổi 2D hoặc 3D cho phần tử. Thuộc tính này cho phép bạn thực hiện quay, phóng to, di chuyển, nghiêng và nhiều hơn nữa cho phần tử.

Xem thêm:

Thư viện tham khảo CSS:Thuộc tính transform

Mô hình

Chuyển động div phần tử:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

Thử nghiệm ngay

Cú pháp

Trả về thuộc tính transform:

object.style.transform

Đặt thuộc tính transform:

object.style.transform = "none|transform-functions|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
none Định nghĩa không có chuyển đổi.
matrix(n, n, n, n, n, n) Định nghĩa chuyển đổi hai chiều bằng cách sử dụng ma trận với sáu giá trị.
matrix3d(n, n, n, n, v.v...) Định nghĩa chuyển đổi 3D bằng cách sử dụng ma trận 4x4 với 16 giá trị.
translate(x, y) Định nghĩa dịch chuyển 2D.
translate3d(x, y, z) Định nghĩa dịch chuyển 3D.
translateX(x) Định nghĩa dịch chuyển, chỉ sử dụng giá trị của trục X.
translateY(y) Định nghĩa dịch chuyển, chỉ sử dụng giá trị của trục Y.
translateZ(z) Định nghĩa dịch chuyển 3D, chỉ sử dụng giá trị của trục Z.
scale(x, y) Định nghĩa chuyển đổi tỷ lệ 2D.
scale3d(x, y, z) Định nghĩa chuyển đổi tỷ lệ 3D.
scaleX(x) Định nghĩa chuyển đổi tỷ lệ bằng cách quy định giá trị cho trục X.
scaleY(y) Định nghĩa chuyển đổi tỷ lệ bằng cách quy định giá trị cho trục Y.
scaleZ(z) Định nghĩa chuyển đổi tỷ lệ 3D bằng cách quy định giá trị cho trục Z.
rotate(góc) Định nghĩa quay 2D, quy định góc trong các tham số.
rotate3d(x, y, z, góc) Định nghĩa quay 3D.
rotateX(góc) Định nghĩa quay 3D theo trục X.
rotateY(góc) Định nghĩa quay 3D theo trục Y.
rotateZ(góc) Định nghĩa quay 3D theo trục Z.
skew(góc-x, góc-y) Định nghĩa chuyển đổi nghiêng 2D theo trục X và Y.
skewX(góc) Định nghĩa chuyển đổi nghiêng 2D theo trục X.
skewY(góc) Định nghĩa chuyển đổi nghiêng 2D theo trục Y.
perspective(n) Định nghĩa khung nhìn cho phần tử chuyển đổi 3D.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: Không có
Giá trị trả về: Chuỗi biểu thị Thuộc tính transform.
Phiên bản CSS: CSS3

Hỗ trợ trình duyệt

Số liệu trong bảng cho biết phiên bản trình duyệt đầu tiên hoàn toàn hỗ trợ thuộc tính này.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0