Transform – Thủ Thuật CSS – 4

Tiếp sau transition, thuộc tính mình hay dùng nhất đi kèm là Transform. Vậy transform là gì ?

Định nghĩa :

là thuộc tính chuyển đổi 2d hoặc 3d cho một phần tử. Bài này sẽ tìm hiểu chủ yếu về 2D bao gồm X và Y.

Các thuộc tính cơ bản bao gồm :

• translate – Di chuyển theo trục với 2 giá trị X (trục X) và Y (trục Y) – px/%
• rotate – Xoay theo tâm – deg
• scale – Tỉ lệ theo cạnh với 2 giá trị X (trục X) và Y (trục Y)
• skew – Nghiêng theo tâm – deg

Cách dùng:

transform: < thuộc tính > ( <giá trị> )

Ví dụ: 

transform: translate(-50px,0);

Chúng ta có thể nối các thuộc tính lại với nhau bằng khoảng trắng như : 

transform: translate(50%,0) rotate(90deg) skew(10deg) scale(1,2);

1 số ví dụ cơ bản và cách áp dụng vào project :

Ngoài việc áp dụng chung với animation, chúng ta còn có thể áp dụng để dịnh dạng layout theo mình muốn với position.
Hẹn gặp các vào bài position