Công cụ tạo CSS Transform

Tạo CSS Transform là gì?

Kết hợp các hàm CSS transform bằng thanh trượt: translate, rotate, scale và skew 2D, cùng perspective, rotateX, rotateY và translateZ 3D. Đường viền nét đứt trong phần xem trước cho thấy vị trí ban đầu và chấm đỏ đánh dấu gốc biến đổi.

Cách sử dụng Tạo CSS Transform

1. Chọn một mẫu có sẵn (Nghiêng 3D, Lật, Xiên, Phóng to, Thẻ 3D) hoặc bắt đầu từ Không.
2. Chỉnh Dịch theo X/Y, Xoay, Co giãn X/Y và Nghiêng X/Y trong Biến đổi 2D.
3. Đặt Phối cảnh, Xoay quanh X, Xoay quanh Y và Dịch theo Z trong Biến đổi 3D.
4. Chọn Gốc biến đổi từ danh sách hoặc đặt Vị trí X/Y.
5. Sao chép mã CSS.

Ví dụ

Dịch theo X 20px, Xoay 45°, Co giãn X 1.5, Co giãn Y 1.5

transform: translate(20px, 0) rotate(45deg) scale(1.5);

Khi nào nên dùng Tạo CSS Transform

Dùng cho hiệu ứng hover, lật thẻ, trưng bày 3D nghiêng và dịch vị trí chính xác. Transform không ảnh hưởng bố cục (các phần tử xung quanh không di chuyển); để đổi bố cục, hãy dùng margin, flexbox hoặc grid. Kết hợp với công cụ tạo CSS Animation để tạo hoạt ảnh giữa các transform.

Tạo CSS Transform hoạt động như thế nào

Các hàm chỉ được viết khi không trung tính, theo thứ tự: perspective(), translate(), translateZ(), rotateX(), rotateY(), rotate(), scale(), skew(). Transform được áp dụng từ phải sang trái tương đối với phần tử, nên thứ tự làm thay đổi kết quả; perspective() phải đứng đầu để tác động lên các hàm 3D phía sau. Co giãn X/Y bằng nhau được viết thành một scale(n) duy nhất. transform-origin chỉ được xuất khi khác tâm mặc định (50% 50%).

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Thẻ sản phẩm nghiêng 3D
• ✓ Hiệu ứng lật thẻ với rotateY(180deg)
• ✓ Phóng to ảnh khi hover
• ✓ Nhãn phần trang xiên bằng skew
• ✓ Mẹo căn giữa với translate(-50%, -50%)

Câu Hỏi Thường Gặp

Khám phá thêm danh mục