Hướng dẫn transform css la gì

Trang chủ
Tham khảo
CSS
CSS3
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í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 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:

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];
}