Hướng dẫn transform: skew css
Show Thuộc tính transform với giá trị skew()Thuộc tính transform với giá trị skew: Xác định sự biến đổi nghiêng 2D dọc theo trục X và Y. HTML viết:
CSS viết:p { background: #cc0000; height: 50px; margin: 0 auto; width: 120px; } Hiển thị trình duyệt khi chưa có transform: skew():Thêm thuộc tính transform: skew(), CSS viết:p { background: #cc0000; height: 50px; margin: 0 auto; width: 120px; transform: skew(10deg,10deg); -moz-transform: skew(10deg,10deg); -webkit-transform: skew(10deg,10deg); -o-transform: skew(10deg,10deg); -ms-transform: skew(10deg,10deg); } Hiển thị trình duyệt khi có transform: skew()Giá trị skew();
transform là gì?
Ứng dụng của
Cấu trúctag {
transform: giá trị;
} Giá trị của
Cách sử dụngHTML viết:
CSS viết - khi chưa sử dụng p { background: #7ACAFF; height: 100px; width: 100px; } Hiển thị trình duyệt: Ta sẽ xem xét vài giá trị của CSS viết: p {
background: #7ACAFF;
height: 50px;
transform: rotate(45deg);
width: 120px;
} Hiển thị trình duyệt: Kết quả cho ta thấy, thành phần p hiện tại đã được xoay một góc 45 độ, các bạn xem thêm một vài ví dụ bên dưới nhe: Ví dụ thêm - Một số transform thường dùngDịch chuyển dọc p {
background: #7ACAFF;
height: 50px;
transform: translateX(100px);
width: 120px;
} Biến đổi nghiên theo trục 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 transform hoặc sử dụng công cụ tạo transform để khám phá nhiều tính năng hơn. |