Chuyển đổi CSS 2D
Chuyển đổi CSS 2D
Các phép biến đổi CSS cho phép bạn di chuyển, xoay, chia tỷ lệ và làm nghiêng các phần tử.
Di chuột qua phần tử bên dưới để xem chuyển đổi 2D:
Trong chương này, bạn sẽ tìm hiểu về thuộc tính CSS sau:
transform
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
Phương pháp chuyển đổi CSS 2D
Với thuộc tính CSS transform, bạn có thể sử dụng các phương pháp chuyển đổi 2D sau:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Mẹo: Bạn sẽ tìm hiểu về các phép biến đổi 3D trong chương tiếp theo.
Phương thức translate ()
Phương translate()thức di chuyển một phần tử khỏi vị trí hiện tại của nó (theo các tham số cho trục X và trục Y).
Ví dụ sau di chuyển phần tử <div> 50 pixel sang phải và 100 pixel xuống từ vị trí hiện tại của nó:
Thí dụ
div
{
transform: translate(50px, 100px);
}
Phương thức xoay ()
Phương rotate()pháp quay một phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ theo một mức độ nhất định.
Ví dụ sau xoay phần tử <div> theo chiều kim đồng hồ với 20 độ:
Thí dụ
div
{
transform: rotate(20deg);
}
Sử dụng các giá trị âm sẽ xoay phần tử ngược chiều kim đồng hồ.
Ví dụ sau xoay phần tử <div> ngược chiều kim đồng hồ với 20 độ:
Thí dụ
div
{
transform: rotate(-20deg);
}
Phương pháp thang đo ()
Phương scale()thức tăng hoặc giảm kích thước của một phần tử (theo các tham số cho chiều rộng và chiều cao).
Ví dụ sau tăng phần tử <div> lên hai lần chiều rộng ban đầu và ba lần chiều cao ban đầu:
Thí dụ
div
{
transform: scale(2, 3);
}
Ví dụ sau giảm phần tử <div> xuống còn một nửa chiều rộng và chiều cao ban đầu của nó:
Thí dụ
div
{
transform: scale(0.5, 0.5);
}
Phương thức scaleX ()
Phương scaleX()thức tăng hoặc giảm chiều rộng của một phần tử.
Ví dụ sau tăng phần tử <div> lên hai lần chiều rộng ban đầu của nó:
Thí dụ
div
{
transform: scaleX(2);
}
Ví dụ sau giảm phần tử <div> xuống còn một nửa chiều rộng ban đầu của nó:
Thí dụ
div
{
transform: scaleX(0.5);
}
Phương pháp scaleY ()
Phương scaleY()thức tăng hoặc giảm chiều cao của một phần tử.
Ví dụ sau tăng phần tử <div> lên ba lần chiều cao ban đầu của nó:
Thí dụ
div
{
transform: scaleY(3);
}
Ví dụ sau giảm phần tử <div> xuống còn một nửa chiều cao ban đầu của nó:
Thí dụ
div
{
transform: scaleY(0.5);
}
Phương thức xiên ()
Phương skewX()pháp này xiên một phần tử dọc theo trục X một góc cho trước.
Ví dụ sau làm nghiêng phần tử <div> 20 độ dọc theo trục X:
Thí dụ
div
{
transform: skewX(20deg);
}
Phương thức xiên Y ()
Phương skewY()pháp xiên một phần tử dọc theo trục Y một góc cho trước.
Ví dụ sau làm nghiêng phần tử <div> 20 độ dọc theo trục Y:
Thí dụ
div
{
transform: skewY(20deg);
}
Phương thức xiên ()
Phương skew()pháp xiên một phần tử dọc theo trục X và Y theo các góc đã cho.
Ví dụ sau làm nghiêng phần tử <div> 20 độ dọc theo trục X và 10 độ dọc theo trục Y:
Thí dụ
div
{
transform: skew(20deg, 10deg);
}
Nếu tham số thứ hai không được chỉ định, nó có giá trị bằng không. Vì vậy, ví dụ sau làm nghiêng phần tử <div> 20 độ dọc theo trục X:
Thí dụ
div
{
transform: skew(20deg);
}
Phương thức ma trận ()
Phương matrix()pháp này kết hợp tất cả các phương pháp biến đổi 2D thành một.
Phương thức matrix () nhận sáu tham số, chứa các hàm toán học, cho phép bạn xoay, chia tỷ lệ, di chuyển (dịch) và xiên các phần tử.
Các tham số như sau: ma trận (scaleX (), xiênY (), xiên X (), quy môY (), translateX (), translateY ())
Thí dụ
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Thuộc tính chuyển đổi CSS
Bảng sau liệt kê tất cả các thuộc tính biến đổi 2D:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
Phương pháp chuyển đổi CSS 2D
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |