Hướng dẫn transform css generator - biến đổi máy phát điện css
Show transform là gì?
Ứng dụng của
Cấu trúctag {
transform: giá trị;
} Giá trị của
rotateY(45deg)Định nghĩa một phép quay 3D dọc theo trục Y, cần dùng kết hợp với giá trị perspective.
rotateZ(angle) p { background: #7ACAFF; height: 100px; width: 100px; } rotateZ(45deg) Định nghĩa một phép quay 3D dọc theo trục Z, cần dùng kết hợp với giá trị perspective. scale(x,y) p {
background: #7ACAFF;
height: 50px;
transform: rotate(45deg);
width: 120px;
} rotateZ(45deg) Định nghĩa một phép quay 3D dọc theo trục Z, cần dùng kết hợp với giá trị perspective. scale(x,y)Số thập phân p {
background: #7ACAFF;
height: 50px;
transform: translateX(100px);
width: 120px;
} scale(1.5,2) p {
background: #7ACAFF;
height: 50px;
transform: skewX(30deg);
width: 120px;
} Xác định một biến đổi tỷ lệ.
Đị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: |