Chuyển đổi CSS 2D

Chuyển đổi CSS 2D

Biến đổi CSS cho phép bạn di chuyển, xoay, chia tỷ lệ và 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.

Phương pháp chuyển đổi CSS 2D

Với thuộc tính transform CSS, bạn có thể sử dụng các phương thức chuyển đổi 2D sau:

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

Phương thức dịch()

Phương thức translate() di chuyển một phần tử khỏi vị trí hiện tại của nó (theo các tham số được cung cấp 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 so với vị trí hiện tại của nó:

Phương thức xoay ()

Phương thức rotate() xoay 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ồ 20 độ:

Sử dụng 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ồ 20 độ:

Phương thức tỉ lệ()

Phương thức scale() tăng hoặc giảm kích thước của một phần tử (theo các tham số được đưa ra 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:

Ví dụ sau đây 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ó:

Phương thức sizeX()

Phương thức scaleX() 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 gấp hai lần chiều rộng ban đầu của nó:

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ó:

Phương thức thang đoY()

Phương thức scaleY() 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 gấp ba lần chiều cao ban đầu của nó:

Ví dụ sau đây giảm phần tử <div> xuống còn một nửa chiều cao ban đầu của nó:

Phương thức skewX()

Phương thức skewX() làm nghiêng một phần tử dọc theo trục X theo một góc đã cho.

Ví dụ sau nghiêng phần tử <div> 20 độ dọc theo trục X:

Phương thức skewY()

Phương thức skewY() làm nghiêng một phần tử dọc theo trục Y theo một góc đã cho.

Ví dụ sau nghiêng phần tử <div> 20 độ dọc theo trục Y:

Phương thức skew()

Phương thức skew() làm nghiêng một phần tử dọc theo trục X và Y theo các góc đã cho.

Ví dụ sau nghiêng phần tử <div> 20 độ dọc theo trục X và 10 độ dọc theo trục Y:

Nếu tham số thứ hai không được chỉ định thì nó có giá trị bằng 0. Vì vậy, ví dụ sau nghiêng phần tử <div> 20 độ dọc theo trục X:

Phương thức ma trận()

Phương thức matrix() kết hợp tất cả các phương thức biến đổi 2D thành một.

Phương thức Matrix() có 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à nghiêng các phần tử.

Các tham số như sau: ma trận(scaleX(), skewY(), skewX(),scaleY(), TranslateX(), TranslateY())

<phong cách>
div {
  chiều rộng: 100px;
  chiều cao: 100px;
  màu nền: xanh nhạt;
  đường viền: màu đen đặc 1px;
  : ;
}
</style>

<cơ thể>
  <div>Đây là div</div>
</body>

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:

Phương pháp chuyển đổi CSS 2D