CSS 2D Transforms

CSS Transforms cho phép bạn dịch chuyển (translate) , xoay (rotate),  thay đổi tỉ lệ ( scale), và nghiêng (skew) phần tử.

Sự biến đổi này một hiệu ứng cho phép một phần tử thay đổi hình dạng, kích thước và vị trí. CSS hỗ trợ chuyển đổi 2D và 3D.

Trong bài này bạn sẽ học về các phương pháp 2D  Transform sau:

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

1. Phương thức translate ()

translate ():  di chuyển một phần tử từ vị trí hiện tại của nó (theo thông số cho trục X và trục Y).

Cú pháp:

  transform: translate(,);

Ví dụ sau di chuyển phần tử <div>  sang bên phải 50px , và 100px xuống từ vị trí hiện tại của nó:

See the Pen QmRGjm by Hung Bui (@hungbuiqb16) on CodePen.

2. Phương thức rotate()

 rotate (): quay một phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ với một mức nhất định.

Cú pháp:

 transform: rotate ();

Ví dụ sau xoay <div> phần tử theo chiều kim đồng hồ với 20 độ:

See the Pen KoLNqG by Hung Bui (@hungbuiqb16) on CodePen.