- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- transform
transform là thuộc tính cho phép dịch chuyển, thay đổi vị trí, hướng, chiều hoặc xoay thành phần, là một
trong những thuộc tính đột phá trong CSS3.
Ứng dụng của transform rất lớn, tạo nên một bước ngoặc trong điều khiển giao diện, trước đây bạn chỉ có thể dùng hình ảnh cho những giao diện xoay trục, 3D hay thậm trí là dịch chuyển, hoặc đơn giản là ứng dụng trong hover thay đổi hình dạng của thành phần,... tất sẽ cả đơn giản hơn khi bạn biết transform .
Cấu trúctag {
transform: giá trị;
} Giá trị của transform rất nhiều, bài học này chủ yểu cho bạn biết cách sử dụng nên sẽ
giới thiệu vài giá trị thường dùng, những giá trị khác bạn có thể tìm hiểu ở phần tham khảo thuộc tính transform.
Giá trị | Đơn vị | VD | Mô tả |
---|
rotate(angle)
| Độ
| rotate(45deg)
| Định nghĩa một phép quay 2D với góc được xác định bởi tham số angle.
| rotateX(angle)
| Độ
| rotateX(45deg)
| Định nghĩa một phép quay 3D dọc theo trục X, cần dùng kết hợp với giá trị perspective.
| rotateY(angle)
| Độ
| rotateY(45deg)
| Định nghĩa một phép quay 3D dọc theo trục Y, cần dùng kết hợp với giá trị perspective.
| rotateZ(angle)
| Độ
| rotateZ(45deg)
| Định nghĩa một phép quay 3D dọc theo trục Z, cần dùng kết hợp với giá trị perspective.
| scale(x,y)
| Số thập phân
| scale(1.5,2)
| Xác định một biến đổi tỷ lệ.
| scaleX(x)
| Số thập phân
| scale(1.5)
| Xác định một biến đổi tỷ lệ theo trục X.
| scaleY(y)
| Số thập phân
| scale(1.5)
| Xác định một biến đổi tỷ lệ theo trục Y.
| skew(x-angle,y-angle)
| Độ
| skew(10deg,10deg);
| Xác định sự biến đổi nghiêng 2D dọc theo trục X và Y.
| skewX(x-angle)
| Độ
| skewX(10deg);
| Xác định sự biến đổi nghiêng 2D dọc theo trục X.
| skewY(y-angle)
| Độ
| skewY(10deg);
| Xác định sự biến đổi nghiêng 2D dọc theo trục Y.
| translate(x,y)
| px, em, ...
| translate(10px,20px);
| Xác định một dịch chuyển 2D.
| translateX(x)
| px, em, ...
| translateX(10px);
| Xác định một dịch chuyển 2D theo trục X.
| translateY(y)
| px, em, ...
| translateY(10px);
| Xác định một dịch chuyển 2D theo trục Y.
| perspective(px)
| px, em, ...
| perspective(10px);
| Giá trị cần cho biến đổi 3D.
|
Cách sử dụngHTML viết: <!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>
<p>transform</p>
</div>
</body>
</html> CSS viết - khi chưa sử dụng transform : p {
background: #7ACAFF;
height: 100px;
width: 100px;
} Hiển thị trình duyệt: Ta sẽ xem xét vài giá trị của transform để hiểu hơn về thuộc tính này nhé: CSS viết: p {
background: #7ACAFF;
height: 50px;
transform: rotate(45deg);
width: 120px;
} Hiển thị trình duyệt: Kết quả cho ta thấy, thành phần p hiện tại đã được xoay một góc 45 độ, các bạn xem thêm một vài
ví dụ bên dưới nhe: Dịch chuyển dọc p {
background: #7ACAFF;
height: 50px;
transform: translateX(100px);
width: 120px;
} Biến đổi nghiên theo trục X p {
background: #7ACAFF;
height: 50px;
transform: skewX(30deg);
width: 120px;
} Các giá trị khác, bạn có thể xem thêm tại tham khảo transform hoặc sử dụng công cụ tạo transform để
khám phá nhiều tính năng hơn. - Trang chủ
- Tham khảo
- CSS
- CSS3
- Thuộc tính transform
Định nghĩa và sử dụngThuộ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 | 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:<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: |