- Trang chủ
- Tham khảo
- CSS
- CSS3
- Thuộc tính transform
Nội dung chính
Show
- Định nghĩa và sử dụng
- Thuộc tính của transform trong css3:
Tóm Tắt
Đị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ínhgiá trịTrình duyệtMô 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 4×4 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:
<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:
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: