🔄 Một bộ công cụ,
mọi nhiệm vụ thiết kế

Trình tạo CSS Transform

Trực quan hóa và tạo CSS transform — xoay, chia tỷ lệ, dịch chuyển và nghiêng với bản xem trước tương tác trực tiếp. Sao chép thuộc tính transform hoàn chỉnh ngay lập tức.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

🔄 Trình tạo CSS Transform

Hướng dẫn chuyển đổi CSS

Các phép biến đổi CSS thay đổi vị trí, kích thước và hướng của các phần tử mà không ảnh hưởng đến luồng tài liệu. Xoay, chia tỷ lệ, dịch và nghiêng có thể được kết hợp trong một thuộc tính biến đổi duy nhất và chúng hoạt động mượt mà với các chuyển tiếp CSS.

Kéo thanh trượt để xem từng biến đổi được áp dụng trong thời gian thực. Hình chữ nhật nét đứt hiển thị vị trí ban đầu trong khi thẻ liền nét hiển thị kết quả được chuyển đổi. Sao chép giá trị biến đổi hoàn chỉnh khi bạn hài lòng.

Pro Tips

Frequently Asked Questions

Q: Sự khác biệt giữa dịch và vị trí là gì?
Sự khác biệt giữa dịch và vị trí là gì? Dịch di chuyển một phần tử một cách trực quan mà không làm thay đổi luồng bố cục. Vị trí (trên cùng/trái) loại bỏ phần tử khỏi luồng hoặc dịch chuyển anh chị em. Dịch cũng được GPU tăng tốc và hoạt ảnh nhanh hơn.
Q: Biến đổi có ảnh hưởng đến bố cục không?
Biến đổi có ảnh hưởng đến bố cục không? Không. Các phần tử được chuyển đổi sẽ giữ nguyên khoảng trống ban đầu trong luồng tài liệu, do đó, tình trạng chồng chéo và tràn là phổ biến — hãy sử dụng lề hoặc phần đệm để dành chỗ.
Q: Tôi có thể kết hợp nhiều biến đổi không?
Tôi có thể kết hợp nhiều biến đổi không? Có, liệt kê chúng được phân tách bằng dấu cách trong một thuộc tính: Transform: TranslateX(10px) Rotate(45deg)scale(1.2); Chúng áp dụng từ phải sang trái trong hệ tọa độ.
Q: Tại sao phần tử được xoay của tôi bị mờ?
Tại sao phần tử được xoay của tôi bị mờ? Xoay ở các góc không phải 90 độ gây ra hiện tượng khử răng cưa. Việc thêm một tỷ lệ nhỏ (1,001) hoặc sử dụng will-change: Transform có thể hữu ích trong một số trình duyệt.
Q: Biến đổi có hoạt động với hoạt ảnh không?
Biến đổi có hoạt động với hoạt ảnh không? Có, biến đổi là một trong những thuộc tính rẻ nhất để tạo hiệu ứng động. Ghép nối với @keyframes hoặc chuyển tiếp — việc tổng hợp GPU giúp hoạt động mượt mà ngay cả trên thiết bị di động.

Màu sắc Việt Nam

Từ màu son đỏ của đình chùa đến màu nâu đất của làng quê, màu sắc Việt Nam gắn liền với lịch sử, nông nghiệp lúa nước và trang phục truyền thống áo dài.

Đỏ son #E32636

Màu son của cổng làng, đình chùa và câu đối

Vàng hoàng thái #FFD700

Màu vàng của hoàng cung và lễ hội

Xanh lam #0056A7

Màu xanh của biển Đông

Màu gạch #B22222

Màu gạch nung của làng quê Bắc Bộ

Vàng nắng #F7C948

Ánh nắng vàng trên cánh đồng lúa chín

Xanh ngọc #00A86B

Màu ngọc bích của vịnh Hạ Long

Tím Huế #7F5FA3

Màu tím của áo dài và hoa phượng tím xứ Huế

Nâu đất #8B5A2B

Màu đất phù sa của đồng bằng sông Hồng

Hồng sen #F5A9B8

Màu hoa sen — quốc hoa của Việt Nam

Trắng ngà #FFFFF0

Màu áo dài trắng của nữ sinh

Q: Màu đỏ son là gì?
Màu đỏ son là gì? Màu đỏ son (#E32636) là màu đỏ truyền thống được dùng để sơn cổng làng, đình chùa và câu đối Tết ở Việt Nam, tượng trưng cho may mắn và thịnh vượng.
Q: Màu tím Huế là gì?
Màu tím Huế là gì? Tím Huế (#7F5FA3) là màu tím đặc trưng của xứ Huế, gắn liền với áo dài tím, hoa phượng tím và nét lãng mạn của cố đô.