Trình tạo hiệu ứng Transform cho CSS.
Trình tạo hiệu ứng Transform cho CSS trực tuyến miễn phí, không cần cài đặt. Hỗ trợ chỉnh sửa các thuộc tính transform một cách trực quan.
Giới thiệu về CSS Transform
Xây dựng tương tác một khai báo transform bằng các thanh trượt cho translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y) và skew (X/Y), kèm theo transform-origin có thể chỉnh sửa và kích thước hộp xem trước có thể điều chỉnh. CSS được tạo dùng translate3d cho phép dịch chuyển, chỉ kết hợp scale/rotate/rotateX/rotateY/skew khi có thay đổi và xuất chúng cùng với transform-origin.
Cách sử dụng
1. Kéo các thanh trượt bên dưới Translate, Scale, Rotate và Skew để dựng một transform; mỗi giá trị còn có ô nhập số để nhập chính xác. 2. Điều chỉnh Box Size của hộp xem trước (50–250px) và chỉnh sửa Transform-Origin (bất kỳ chuỗi CSS origin nào, mặc định 50% 50%). 3. Bấm Reset để đưa mọi giá trị về mặc định trung tính. 4. Bấm Copy để sao chép cả khai báo transform: ... và transform-origin: ....
Các hàm Transform và phạm vi giá trị
translateX/Y/Z: từ -200 đến 200 px, được xuất cùng nhau thành translate3d(x, y, z) khi có giá trị bất kỳ khác 0. scaleX/Y: từ 0,1 đến 3, được xuất thành scale(x, y) khi một trong hai khác 1. rotate (Z): từ -360 đến 360deg. rotateX/Y: từ -180 đến 180deg. skewX/Y: từ -60 đến 60deg, được xuất thành skew(x, y) khi một trong hai khác 0. Nếu không hàm nào thay đổi, kết quả là transform: none.
▶Tại sao phép xoay của tôi chỉ hiển thị ở 3D nhưng phần tử lại trông phẳng?
▶Kết quả có bao gồm transform-origin không?
▶Tôi có thể nhập giá trị chính xác thay vì kéo thanh trượt không?
▶Tại sao translate lại tạo ra translate3d dù tôi chỉ dịch một trục?
Nếu công cụ này đã giúp ích cho bạn, hãy nghĩ đến việc mua một cốc cà phê cho tôi.
Hãy mua cho tôi một cốc cà phê nhé.