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ị	Mô tả
transform	none	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	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	Các thành phần bên trong sẽ giữ vị trí 3D của nó.
transform-style	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

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

Link liên quan

text

transition