Hướng dẫn transform css
Show 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.
Định nghĩa và sử dụngThuộc tính transform 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, ... Thuộc tính của transform trong css3:
Ví dụHTML viết:
CSS viết:p { background: #cc0000; height: 50px; width: 80px; } Hiển thị trình duyệt khi chưa có transform:Thêm thuộc tính transform vào CSS:p { background: #cc0000; height: 50px; width: 80px; transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); } Hiển thị trình duyệt khi có transform: |