CSS3 06 – CSS3 2D 3D Transform

0
90

CSS3 2D , 3D Transform giúp chúng ta thay đổi hình dạng , kích thước , vị trí của các khối trong trang web trên mặt phẳng 2 chiều

1. Trinh duyệt hỗ trợ

CSS3 2D, 3D Transform hỗ trợ hầu hết các trình duyệt hiện hành, ngoài ra để hiện thị tốt trên các trình duyệt thì chúng ta phải thêm các tiền tố phù hợp với trình duyệt đó.

Các ban có thể xem lại các tiền tố này trong bài CSS3 01 – Giới thiệu về CSS3

2. Cú pháp 

CSS3 2D Transfrom cung cấp cho chúng ta các phương thức sau:

  • translate()
  • rotate()
  • scale()
  • skew()

3. Cách dùng các phương thức

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

Phương thức translate()  cho phép chúng ta thay đổi vị trí của một phần tử trên mặt phẳng 2 chiều.

Cú pháp

Trong đó :

X là khoảng cách theo chiều ngang

Y là khoảng cách theo chiều dọc

(X,Y được tính bằng điểm ảnh)

Ví dụ tôi muốn dịch chuyển một khối có width = 100px và height = 100px cách vị trí gốc của nó theo chiều ngang là 100px và theo chiều dọc là 50px

See the Pen wqrOLR by Cao Anh Nhất (@xeko995) on CodePen.dark

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

Phương thức rotate cho phép chúng ta quay một phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ so với vị trí ban đầu của nó.

Cú pháp

Giá trị của phương thức rotate được đính bằng độ , kí hiệu: deg

Ví dụ muốn quay khối ở ví dụ trên một góc 45deg

See the Pen vJeMEj by Cao Anh Nhất (@xeko995) on CodePen.dark

3.3. Phương thức scale()

Phương thức scale() sẽ lấy một số làm giá trị của nó và tăng hoặc giảm kích thước của phần tử bởi yếu tố đó.

Cú pháp

Trong đó

gt1,gt2: là các số đại diện cho chiều rộng và chiều cao muốn tăng hoặc giảm kích thước

Ví dụ để tăng chiều rộng của khối ở ví dụ đầu tiên lên 2 lần và giảm chiều cao xuống 1/2

See the Pen dzVLMd by Cao Anh Nhất (@xeko995) on CodePen.dark

3.4. Phương thức skew()
  • Phương thức skew() cho phép chúng ta nghiêng một khối theo trục X hoặc Y theo một mức độ nhất định.

Cú pháp

*Note: Các giá trị của phương thức skew đều được tính bằng độ “deg”

Ví dụ muốn làm lệch khối vuông 200px theo chiều X 45deg và chiều Y 20deg

See the Pen broJqX by Cao Anh Nhất (@xeko995) on CodePen.dark

 

 

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here