Các phép biến đổi trong CSS cho phép bạn di chuyển, xoay, chia tỷ lệ và làm nghiêng các phần tử

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

Với thuộc tính transform trong CSS, 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()

1.1 Phương thức translate()

Phương thức translate() sẽ 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ụ:

1.2 Phương thức rotate()

Phương thức rotate() 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ụ:

Sử dụng các giá trị âm sẽ xoay phần tử ngược chiều kim đồng hồ

Ví dụ:

1.3 Phương thức scale()

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ố cho chiều rộng và chiều cao)

Ví dụ:

1.3.1 Phương thức scaleX()

Phương thức scaleX() tăng hoặc giảm chiều rộng của một phần tử

Ví dụ:

1.3.2 Phương thức scaleY()

Phương thức scaleY() tăng hoặc giảm chiều cao của một phần tử

Ví dụ:

1.4 Phương thức skew()

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

Ví dụ:

Nếu tham số thứ hai không được chỉ định, nó sẽ có giá trị bằng 0

Ví dụ:

1.4.1 Phương thức skewX()

Phương thức skewX() xiên một phần tử dọc theo trục X một góc cho trước

Ví dụ:

1.4.2 Phương thức skewY()

Phương thức skewY() xiên một phần tử dọc theo trục Y một góc cho trước

Ví dụ:

1.5 Phương thức matrix()

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() 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ố có thứ tự như sau: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

2. Các trình duyệt hỗ trợ

Phần tử
transform 36.0 10.0 16.0 9.0 23.0