Thuộc tính transform

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

Thuộc tính transform xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng, ...

Thuộc tính của transform trong css3:

Thuộc tính giá trị Trình duyệt Mô tả
transform none
  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari
Xác định rằng không có chuyển đổi
matrix(n,n,n,n,n,n) Định nghĩa một biến đổi 2D, bằng cách sử dụng một ma trận với 6 giá trị

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Định nghĩa một biến đổi 3D, bằng cách sử dụng một ma trận 4x4 với 16 giá trị

perspective(n)

Định nghĩa một biến đổi 3D dưới dạng phối cảnh.
rotate(góc) Định nghĩa một phép quay 2D với góc được xác định bởi tham số.
rotate3d(x,y,z,angle) Định nghĩa một phép quay 3D được xác định bởi các tham số.
rotateX(angle) Định nghĩa một phép quay 3D dọc theo trục X.
rotateY(angle) Định nghĩa một phép quay 3D dọc theo trục Y.
rotateZ(angle) Định nghĩa một phép quay 3D dọc theo trục Z.
scale(x,y) Xác định một biến đổi tỷ lệ, 2D.
scale3d(x,y,z) Xác định một biến đổi tỷ lệ, 3D.
scaleX(x) Xác định một biến đổi tỷ lệ theo trục X.
scaleY(y) Xác định một biến đổi tỷ lệ theo trục Y.
scaleZ(z) Xác định một biến đổi tỷ lệ theo trục Z.
skew(x-angle,y-angle) Xác định sự biến đổi nghiêng 2D dọc theo trục X và Y.
skewX(angle) Xác định sự biến đổi nghiêng 2D dọc theo trục X.
skewY(angle) Xác định sự biến đổi nghiêng 2D dọc theo trục Y.
translate(x,y) Xác định một dịch chuyển 2D.
translate3d(x,y,z) Xác định một dịch chuyển 3D.
translateX(x) Xác định một dịch chuyển 2D theo trục X.
translateY(y) Xác định một dịch chuyển 2D theo trục Y.
translateZ(z) Xác định một dịch chuyển 2D theo trục Z.
transform-origin Giá trị trục X
  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari
Xác định nơi nhìn thấy được đặt tại trục X, giá trị có thể: left, right, center, chiều dài, %.
Giá trị trục Y Xác định nơi nhìn thấy được đặt tại trục Y, giá trị có thể: left, right, center, chiều dài, %.
Giá trị trục Z Xác định nơi nhìn thấy được đặt tại trục Z, giá trị có thể: chiều dài.
transform-style preserve-3d
  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari
Các thành phần bên trong sẽ giữ vị trí 3D của nó.
flat Các thành phần bên trong sẽ không giữ vị trí 3D của nó.

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>transform</p>
</body>
</html>

CSS viết:

p {
    background: #cc0000;
    height: 50px;
    width: 80px;
}

Hiển thị trình duyệt khi chưa có transform:

transform

Thêm thuộc tính transform vào CSS:

p {
    background: #cc0000;
    height: 50px;
    width: 80px;
    transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
}

Hiển thị trình duyệt khi có transform:

transform

Trình duyệt và hệ điều hành hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính transform:

  Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
transform 9
-ms-
3.6
-moz-
5
-o-
4
-webkit-
3
-webkit-
3.2
-webkit-
2.1
-webkit-
7.5
transform-origin 9
-ms-
3.6
-moz-
5
-o-
4
-webkit-
3
-webkit-
3.2
-webkit-
2.1
-webkit-
7.5
transform-style 10
X
14
X
12
X
20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
8
X