Định nghĩa và sử dụng transform
Thuộc tính transform trong CSS3 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 |
| 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ó. |
| 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:
transform
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:
