Show
Ứng dụng của
Constructortag {
transform: giá trị;
}Giá trị của Cách sử dụngviết HTML <!DOCTYPE HTML> <html> <head></head> <body> <div> <p>transform</p> </div> </body> </html> Viết CSS - khi chưa sử dụng p {
background: #7ACAFF;
height: 100px;
width: 100px;
}Show the browser Ta sẽ xem xét một số giá trị của viết CSS p {
background: #7ACAFF;
height: 50px;
transform: rotate(45deg);
width: 120px;
}Show the browser Kết quả cho ta thấy, thành phần p hiện tại đã bị xoay một góc 45 độ, các bạn xem thêm vài ví dụ bên dưới nhé Ví dụ thêm - Một số biến đổi thường được sử dụngVertical shift p {
background: #7ACAFF;
height: 50px;
transform: translateX(100px);
width: 120px;
}Biến đổi nghiên cứu theo thành phần X p {
background: #7ACAFF;
height: 50px;
transform: skewX(30deg);
width: 120px;
}Các giá trị khác, bạn có thể xem thêm tại tham khảo biến đổi hoặc sử dụng công cụ tạo biến đổi để khám phá nhiều tính năng hơn
Định nghĩa và sử dụngThuộc tính biến đổi xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, Tỷ lệ, di chuyển, nghiêng, Bạn đã bao giờ vào một trang web và thấy các phần tử chuyển động chuyên nghiệp, đẹp mắt chưa? .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 Chuyển đổi CSS đó là chuyển đổi 2D và 3D. Trong bài viết hôm nay, chúng tôi sẽ cùng các 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 các bạn cùng theo dõi ngay nhé. Transform CSS là gì? nội dung
2D Transform CSS là gì?2D Transform CSS là các thuộc tính được sử dụng để xử lý các hiệu ứng chuyển đổi 2D của các phần tử trên trang web. Chức năng của các thuộc tính trong 2D Transform CSSMô tả giá trị translate(x,y)Di chuyển phần tử dọc theo trục x và trục ytranslateX(n)Di chuyển phần tử dọc theo trục xtranslateY(n)Di chuyển phần tử dọc theo trục yscale(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 địnhskewX(angle)Định dạng phần tử nghiêng một góc theo trục OxskewY(angle)Định dạng phần tử nghiêng một góc theo trục Oymatrix(n,n,n,n,n,n)Tổng hợp giữa scale, skew và translateHướng dẫn sử dụng 2D Transform CSSSau đây 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 TranslatePhương thức dịch hay còn gọi là dịch hoặc chuyển sẽ giúp bạn chuyển một phần 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.
Cách sử dụng Transform CSS Translate Ở cấu trúc này, bạn có thể dịch chuyển div theo số pixel duy nhất.
Cách sử dụng Transform CSS Translate theo Rate % Cách sử dụng Transform scalePhương thức chuyển đổi Thang đo 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 số duy nhất, nó sẽ làm tăng hoặc giảm kích thước của phần tử theo số duy nhất mà bạn đã chọn.
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.
Hướng dẫn cách sử dụng Transform Scale Nếu bạn lựa chọn chỉ hai 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.
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 số duy nhất. Bạn có thể sử dụng theo cấu trúc dưới đây
Hướng dẫn cách chuyển đổi CSS. QuayTransform CSS Rotate là một cấu trúc xoay vòng. Theo mặc định, các phần tử sẽ xoay quanh tâm của nó. You can only going it rotate THEO SUẤT NHIỆT ĐỘ, BAO NHIÊU RAdian HOẶC QUAY TỪ 0turn to 1turn.
Hướng dẫn cách chuyển đổi CSS. Quay
Hướng dẫn cách chuyển đổi CSS. Quay 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 mang lại nhiều hiệu ứng độc đáo. Trên thực tế, cấu trúc 2D biến đổi 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 website của mình ngày càng sinh động hơn. Kết luậnĐể sử dụng thuộc tính thuộc tính của biến đổi css, bạn cần thực hiện nhiều lần và nhấn để bắt chính xác các tham số tọa độ. Với transform css bạn có thể tạo ra nhiều giao diện với các định dạng 2D hoặc 3D giúp 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 đã đi đến những thông tin hữu ích. Cảm ơn bạn đọc đã quan tâm theo dõi. |
