Transform CSS là gì? Hướng dẫn 3 cách sử dụng 2D CSS Transform
13/05/2022 09:23 am | Lượt xem : 14713
Bạn đã bao giờ vào một website và thấy các phần tử chuyển động chuyên nghiệp, đẹp mắt chưa? Bạn đang thắc mắc không biết sử dụng kỹ thuật gì để làm được như thế? Trong ngành công nghệ thông tin, người ta gọi đó là “Transform CSS”.
Transform CSS được dịch là thuộc tính chuyển đổi. Nó cho phép bạn thay đổi vị trí, hình dáng và xoay các phần tử theo nhiều hướng khác nhau. Trên thực tế, có hai loại Transform CSS đó là 2D và 3D transformation.
Tại bài viết hôm nay, chúng tôi sẽ cùng bạn tìm hiểu về loại 2D Transform cũng như cách sử dụng của chúng. Mời bạn cùng theo dõi ngay nhé!
💥💥Kiếm tiền ngay trên website của bạn. Tham gia ngay 💥💥
Transform CSS là gì? Những thông tin hướng dẫn cách sử dụng 2D transform
Contents
2D Transform CSS là gì?
2D Transform CSS là những thuộc tính được dùng để xử lý các hiệu ứng di chuyển 2D của các phần tử trên website.
Để tạo một transform 2D bạn sẽ sử dụng cú pháp sau đây:
transform: value(argument);
Các giá trị thường được sử dụng trong 2D Transform gồm có: translate(), rotate(), scale(), skewX(), skewY(), matrix(). Sau đây chúng tôi sẽ giới thiệu cụ thể về chức năng của từng thuộc tính này.
Chức năng của các thuộc tính trong 2D Transform CSS
| Giá trị | Mô tả |
| translate(x,y) | Di chuyển phần tử dọc theo trục x và trục y |
| translateX(n) | Di chuyển phần tử dọc theo trục x |
| translateY(n) | Di chuyển phần tử dọc theo trục y |
| scale(x,y) | Thay đổi chiều rộng và chiều cao của một phần tử |
| scaleX(n) | Thay đổi chiều rộng của một phần tử |
| scaleY(n) | Thay đổi chiều cao của một phần tử |
| rotate(angle) | Xoay phần tử theo một góc nào đó (angle) |
| skew(x-angle,y-angle) | Định dạng phần tử có độ nghiêng theo một góc nhất định |
| skewX(angle) | Định dạng phần tử nghiêng một góc theo trục Ox |
| skewY(angle) | Định dạng phần tử nghiêng một góc theo trục Oy |
| matrix(n,n,n,n,n,n) | Tổng hợp giữa scale, skew và translate |
Hướng dẫn sử dụng 2D Transform CSS
Sau đây chúng tôi sẽ hướng dẫn bạn cách sử dụng các hiệu ứng chuyển đổi dạng 2D. Trong phần hướng dẫn này các Div có màu xanh lam sẽ ký hiệu cho các phần tử chưa được chuyển đổi. Các Div có màu cam sẽ đại diện cho các phần tử đã được áp dụng hiệu ứng.
Cách sử dụng Transform CSS Translate
Phương thức translate hay còn gọi là dịch hoặc di chuyển sẽ giúp bạn di chuyển một phần từ từ trang lên, xuống, trái hoặc phải. Bạn có thể dịch chuyển theo một số lượng nhất định.
Trong cấu trúc, translate chữ số đầu tiên sẽ xác định khoảng cách theo chiều ngang. Chữ số thứ hai xác định khoảng cách theo chiều dọc bạn nhé.
Đây là cấu trúc cụ thể:
transform: translate(100px, 75px);
Cách sử dụng Transform CSS Translate
Ở cấu trúc này bạn có thể dịch chuyển div theo chỉ số pixel.
Ngoài ra, bạn cũng có thể sử dụng tỷ lệ phần trăm để định dạng. Phần trăm di chuyển div từ ngang so với dọc, rộng so với cao sẽ xác định vị trí dịch chuyển của div. Cấu trúc cụ thể như sau:
transform: translate(100%, 50%);
Cách sử dụng Transform CSS Translate theo tỷ lệ %
Cách sử dụng Transform scale
Phương thức transform Scale giúp thay đổi kích thước của phần tử cuối cùng. Nếu bạn cung cấp một chỉ số, nó sẽ làm tăng hoặc giảm đi kích thước của phần tử theo chỉ số mà bạn đã chọn.
Bạn có thể sử dụng phương thức này một cách đơn giản qua việc sử dụng cấu trúc sau đây:
transform: scale(2);
Khi bạn sử dụng cấu trúc trên kết quả sẽ hiển thị như sau:
Cách sử dụng Transform scale
Ngoài ra bạn cũng có thể sử dụng cấu trúc sau đây và kết quả sẽ được hiển thị như hình bên dưới:
transform: scale(0.75);
Hướng dẫn cách sử dụng Transform Scale
Nếu bạn lựa chọn hai chỉ số và phân cách chúng bằng dấu phẩy thì chỉ số đầu tiên sẽ xác định chiều ngang. Chỉ số thứ hai sẽ xác định chiều dọc của phần tử mà bạn muốn chỉnh sửa.
transform: scale(4, 2);
Phương thức scaleX () thì chỉ thay đổi tỷ lệ theo chiều ngang của một phần tử vì chỉ có một chỉ số. Bạn có thể sử dụng theo cấu trúc dưới đây:
transform: scaleX(2);
Hướng dẫn cách chuyển đổi CSS: Rotate
Transform CSS Rotate là một cấu trúc xoay vòng. Theo mặc định thì các phần tử sẽ xoay xung quanh trục tâm của nó. Bạn có thể chỉ định nó xoay theo độ nghiêng bao nhiêu độ, bao nhiêu radian hoặc quay từ 0turn đến 1turn.
Dưới dây là cấu trúc của Transform CSS Rotate
transform: rotate(45deg)
Hướng dẫn cách chuyển đổi CSS: Rotate
transform: rotate(0.75turn);
Hướng dẫn cách chuyển đổi CSS: Rotate
Khi nhìn vào những hình ảnh mô tả chắc chắn bạn đã hiểu được kết quả khi áp dụng công thức đối với mỗi phần tử rồi phải không nào. Đây là một cấu trúc đơn giản, dễ hiểu và cũng đem lại nhiều hiệu ứng độc đáo. Trên thực tế các cấu trúc 2D transform còn rất nhiều và cũng đa dạng về đơn vị và cách thực hiện. Bạn đọc cũng có thể tham khảo thêm nhiều cấu trúc hơn liên quan đến 3D transform CSS để giúp cho website của mình ngày càng sinh động hơn.
MiraWEB – Tạo website tự động bằng AI trong 30 giây
Kết luận
Để sử dụng thành thạo thuộc tính của transform css bạn cần thực hiện nhiều lần và nắm bắt chính xác các thông số tọa độ. Với transform css bạn có thể tạo ra nhiều giao diện với các hình dạng 2D hoặc 3D giúp cho website của bạn trở nên sinh động và chuyên nghiệp hơn rất nhiều. Chúng tôi hy vọng bài viết này đã đem đến những thông tin hữu ích. Cảm ơn bạn đọc đã quan tâm theo dõi.
Các tìm kiếm liên quan đến chủ đề “transform css là gì”
| Transform: translate CSS | Transform CSS là gì |
| Text-transform CSS | transform: translatex css |
| transform: translate css là gì | transform-origin trong css |
| Transform: scale CSS | CSS transform |
Bài viết liên quan
Thiết kế CV trên website cực đơn giản với 5 template có sẵn
Top 5 mẫu thiết kế website nội thất miễn phí đáng dùng nhất
Download website CV xin việc mẫu mới 2022: Dễ dàng thiết kế
04 Bước thiết kế website bất động sản với theme của Tenten
