CSS chuyển đổi 2D
- Trang trước CSS font mạng
- Trang tiếp theo CSS chuyển đổi 3D
CSS chuyển đổi 2D
CSS chuyển đổi (transforms) cho phép bạn di chuyển, quay, thu phóng và nghiêng các phần tử.
Đặt con trỏ chuột lên phần tử dưới đây để xem các chuyển đổi 2D:
Trong chương này, bạn sẽ học về các thuộc tính CSS sau đây:
transform
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.
| Thuộc tính | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
Phương pháp chuyển đổi 2D CSS
Bằng cách sử dụng CSS transform Thuộc tính, bạn có thể sử dụng các phương thức chuyển đổi 2D sau đây:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Lưu ý:Bạn sẽ học về các chuyển đổi 3D trong chương tiếp theo.
Phương thức translate()
translate() Phương thức di chuyển phần tử từ vị trí hiện tại (theo các tham số được chỉ định cho trục X và Y).
Dưới đây là ví dụ để di chuyển thẻ <div> từ vị trí hiện tại sang phải 50 pixel và xuống 100 pixel:
Ví dụ
div {
transform: translate(50px, 100px);
}
Phương thức rotate()
rotate() Phương thức quay phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ theo góc được cung cấp.
Dưới đây là ví dụ để quay phần tử <div> theo chiều kim đồng hồ 20 độ:
Ví dụ
div {
transform: rotate(20deg);
}
Sử dụng giá trị âm để quay phần tử ngược chiều kim đồng hồ.
Dưới đây là ví dụ để quay phần tử <div> ngược chiều kim đồng hồ 20 độ:
Ví dụ
div {
transform: rotate(-20deg);
}
Phương thức scale()
scale() Phương thức tăng hoặc giảm kích thước của một phần tử (theo các tham số chiều rộng và chiều cao được cung cấp).
Dưới đây là ví dụ để tăng kích thước của thẻ <div> lên gấp đôi chiều rộng và gấp ba chiều cao ban đầu:
Ví dụ
div {
transform: scale(2, 3);
}
Dưới đây là ví dụ để giảm kích thước của thẻ <div> xuống một nửa chiều rộng và chiều cao ban đầu:
Ví dụ
div {
transform: scale(0.5, 0.5);
}
Phương thức scaleX()
scaleX() Cách tăng hoặc giảm chiều rộng của một phần tử.
Dưới đây là ví dụ để tăng kích thước của thẻ <div> lên gấp đôi chiều rộng ban đầu:
Ví dụ
div {
transform: scaleX(2);
}
Dưới đây là ví dụ để giảm kích thước của thẻ <div> xuống một nửa chiều rộng ban đầu:
Ví dụ
div {
transform: scaleX(0.5);
}
Phương pháp scaleY()
scaleY() Phương pháp này tăng hoặc giảm chiều cao của phần tử.
Ví dụ sau làm cho phần tử <div>增大 đến ba lần chiều cao ban đầu của nó:
Ví dụ
div {
transform: scaleY(3);
}
Ví dụ sau làm cho phần tử <div> thu nhỏ đến một nửa chiều cao ban đầu của nó:
Ví dụ
div {
transform: scaleY(0.5);
}
Phương pháp skewX()
skewX() Phương pháp này cho phép phần tử nghiêng theo góc đã cho trên trục X.
Ví dụ sau làm cho phần tử <div> nghiêng theo trục X 20 độ:
Ví dụ
div {
transform: skewX(20deg);
}
Phương pháp skewY()
skewY() Phương pháp này cho phép phần tử nghiêng theo góc đã cho trên trục Y.
Ví dụ sau làm cho phần tử <div> nghiêng theo trục Y 20 độ:
Ví dụ
div {
transform: skewY(20deg);
}
Phương pháp skew()
skew() Phương pháp này cho phép phần tử nghiêng theo góc đã cho trên trục X và Y.
Ví dụ sau làm cho phần tử <div> nghiêng theo trục X 20 độ, đồng thời nghiêng theo trục Y 10 độ:
Ví dụ
div {
transform: skew(20deg, 10deg);
}
Nếu không chỉ định tham số thứ hai, giá trị sẽ là số zero. Do đó, ví dụ sau làm cho phần tử <div> nghiêng theo trục X 20 độ:
Ví dụ
div {
transform: skew(20deg);
}
Phương pháp matrix()
matrix() Phương pháp này hợp nhất tất cả các phương pháp chuyển đổi 2D thành một.
matrix() Phương pháp này có thể chấp nhận sáu tham số, bao gồm các hàm toán học, các tham số này cho phép bạn quay, thu phóng, dịch (di chuyển) và nghiêng phần tử.
Các tham số như sau: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Ví dụ
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Thuộc tính chuyển đổi CSS
Bảng dưới đây liệt kê tất cả các thuộc tính chuyển đổi 2D:
| Thuộc tính | Mô tả |
|---|---|
| transform | Áp dụng chuyển đổi 2D hoặc 3D cho phần tử. |
| transform-origin | Cho phép bạn thay đổi vị trí của phần tử được chuyển đổi. |
Phương pháp chuyển đổi 2D CSS
| Hàm | Mô tả |
|---|---|
| matrix(n,n,n,n,n,n) | Định nghĩa变换 2D, sử dụng ma trận sáu giá trị. |
| translate(X,Y) | Định nghĩa变换 2D, di chuyển phần tử theo trục X và Y. |
| translateX(n) | Định nghĩa变换 2D, di chuyển phần tử theo trục X. |
| translateY(n) | Định nghĩa变换 2D, di chuyển phần tử theo trục Y. |
| scale(X,Y) | Định nghĩa chuyển đổi thu nhỏ 2D, thay đổi chiều rộng và chiều cao của phần tử. |
| scaleX(n) | Định nghĩa chuyển đổi thu nhỏ 2D, thay đổi chiều rộng của phần tử. |
| scaleY(n) | Định nghĩa chuyển đổi thu nhỏ 2D, thay đổi chiều cao của phần tử. |
| rotate(góc) | Định nghĩa quay 2D, quy định góc trong tham số. |
| skew(góc X,góc Y) | Định nghĩa chuyển đổi nghiêng 2D theo trục X và Y. |
| skewX(góc) | Định nghĩa chuyển đổi nghiêng 2D theo trục X. |
| skewY(góc) | Định nghĩa chuyển đổi nghiêng 2D theo trục Y. |
- Trang trước CSS font mạng
- Trang tiếp theo CSS chuyển đổi 3D
