toolsmoah

Trình tạo Transform

Tạo và xem trước các thuộc tính biến đổi CSS một cách trực quan.

CSS Transform là một thuộc tính CSS mạnh mẽ cho phép bạn biến đổi các phần tử web trong không gian 2D hoặc 3D. Thông qua các phép biến đổi như dịch chuyển, xoay, tỷ lệ và xiên, bạn có thể tạo ra các thiết kế web động và tương tác. Dễ dàng tạo các hiệu ứng mong muốn với bản xem trước thời gian thực.

Cài đặt Transform

Điều chỉnh từng thuộc tính biến đổi

Dịch chuyển X (0px)

Dịch chuyển Y (0px)

Tỷ lệ X (1)

Tỷ lệ Y (1)

Xoay (0°)

Xiên X (0°)

Xiên Y (0°)

Xem trước

Kiểm tra hiệu ứng biến đổi đã tạo

Transform

CSS đã tạo

transform: none;

Cài đặt sẵn

Thử các kiểu biến đổi được xác định trước

Tham chiếu hàm Transform

Các hàm Transform

• translate(x, y): translate(x, y): Di chuyển phần tử theo lượng x, y
• scale(x, y): scale(x, y): Thay đổi tỷ lệ phần tử theo tỷ lệ x, y
• rotate(angle): rotate(angle): Xoay phần tử theo góc
• skew(x, y): skew(x, y): Xiên phần tử theo độ x, y

Mẹo sử dụng

• Nhiều hàm biến đổi có thể được kết hợp với khoảng trắng
• Thay đổi gốc biến đổi bằng transform-origin
• Sử dụng với transition để tạo hiệu ứng hoạt ảnh
• Sử dụng thuộc tính perspective cho các biến đổi 3D

📚 Hướng dẫn đầy đủ về CSS Transform

Hướng dẫn chi tiết để thành thạo CSS Transform

🎯 Các khái niệm cơ bản về Transform

CSS Transform là một thuộc tính CSS thay đổi hình dạng, kích thước và vị trí của các phần tử. Nó cho phép biến đổi trực quan các phần tử mà không làm gián đoạn luồng tài liệu thông thường.

Cú pháp cơ bản:

transform: function(value) function(value) ...;

📐 Chi tiết hàm Transform

🔄 Dịch chuyển (Chuyển động)

• translate(x, y): translate(x, y): Di chuyển dọc theo trục X, Y
• translateX(x): translateX(x): Chỉ di chuyển dọc theo trục X
• translateY(y): translateY(y): Chỉ di chuyển dọc theo trục Y
• translate3d(x, y, z): translate3d(x, y, z): Chuyển động 3D

transform: translate(50px, 100px);

📏 Tỷ lệ (Thay đổi kích thước)

• scale(x, y): scale(x, y): Thay đổi tỷ lệ trục X, Y
• scaleX(x): scaleX(x): Chỉ thay đổi tỷ lệ trục X
• scaleY(y): scaleY(y): Chỉ thay đổi tỷ lệ trục Y
• Lớn hơn 1 phóng to, nhỏ hơn 1 thu nhỏ

transform: scale(1.5, 0.8);

🔄 Xoay (Rotation)

• rotate(angle): rotate(angle): Xoay quanh trục Z
• rotateX(angle): rotateX(angle): Xoay quanh trục X
• rotateY(angle): rotateY(angle): Xoay quanh trục Y
• Sử dụng các đơn vị deg, rad, turn cho góc

transform: rotate(45deg);

📐 Xiên (Shearing)

• skew(x, y): skew(x, y): Xiên dọc theo trục X, Y
• skewX(angle): skewX(angle): Xiên dọc theo trục X
• skewY(angle): skewY(angle): Xiên dọc theo trục Y
• Biến đổi thành hình bình hành

transform: skew(15deg, 5deg);

🎨 Gốc Transform (Điểm biến đổi)

Thuộc tính transform-origin đặt điểm gốc biến đổi. Mặc định là tâm của phần tử (50% 50%).

Sử dụng từ khóa

transform-origin: top left;

Sử dụng phần trăm

transform-origin: 25% 75%;

Sử dụng pixel

transform-origin: 10px 20px;

⚡ Mẹo tối ưu hóa hiệu suất

✅ Khuyến nghị

• Chỉ hoạt ảnh transform và opacity
• Sử dụng thuộc tính will-change
• Sử dụng tăng tốc 3D (translateZ(0))
• Tạo các lớp tổng hợp để có hiệu suất tốt hơn

❌ Những điều cần tránh

• Hoạt ảnh chiều rộng, chiều cao
• Hoạt ảnh vị trí trái, trên
• Lồng transform quá mức
• Sử dụng will-change không cần thiết

Ví dụ tối ưu hóa hiệu suất:

.optimized {
  will-change: transform;
  transform: translateZ(0); /* 3D 가속 */
  transition: transform 0.3s ease;
}

🎬 Hoạt ảnh và chuyển tiếp

Transform có thể được sử dụng với CSS Transition và Animation để tạo hiệu ứng mượt mà.

Ví dụ chuyển tiếp

.hover-effect {
  transition: transform 0.3s ease;
}
.hover-effect:hover {
  transform: scale(1.1) rotate(5deg);
}

Ví dụ hoạt ảnh Keyframe

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }

🌐 Khả năng tương thích trình duyệt

CSS Transform được hỗ trợ trong tất cả các trình duyệt hiện đại, nhưng có thể cần tiền tố nhà cung cấp cho các trình duyệt cũ hơn.

Ví dụ tiền tố nhà cung cấp:

-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */

🎯 Các ví dụ sử dụng thực tế

Hiệu ứng di chuột trên thẻ

.card {
  transition: transform 0.3s ease;
  cursor: pointer;
}
.card:hover {
  transform: translateY(-10px) scale(1.02);
}

Spinner tải

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
}

Hiệu ứng vào modal

.modal {
  transform: scale(0) rotate(180deg);
  transition: transform 0.3s ease;
}
.modal.show {
  transform: scale(1) rotate(0deg);
}

Hiệu ứng nhấp nút

.button {
  transition: transform 0.1s ease;
}
.button:active {
  transform: scale(0.95);
}

🔧 Công cụ gỡ lỗi và phát triển

Công cụ phát triển trình duyệt

• Chỉnh sửa thời gian thực trong bảng Elements
• Kiểm tra các giá trị cuối cùng trong tab Computed
• Phân tích hiệu suất với tab Performance
• Kiểm tra cấu trúc lớp với Chế độ xem 3D

Các thuộc tính CSS hữu ích

• transform-style: preserve-3d
• perspective: 1000px
• backface-visibility: hidden
• will-change: transform

💡 Mẹo chuyên nghiệp

Mẹo hiệu suất

Sử dụng transform3d() hoặc translateZ(0) để tạo các lớp tổng hợp cho tăng tốc GPU có thể cải thiện đáng kể hiệu suất hoạt ảnh.

Mẹo khả năng tiếp cận

Sử dụng truy vấn phương tiện prefers-reduced-motion để cung cấp các lựa chọn thay thế cho người dùng nhạy cảm với chuyển động.

Mẹo thiết kế

Đặt transform-origin đúng cách có thể tạo ra các hiệu ứng biến đổi tự nhiên hơn.

Mẹo phát triển

Sử dụng các biến CSS để điều khiển động các giá trị biến đổi giúp tích hợp JavaScript dễ dàng hơn.

Trình tạo Transform

Tạo và xem trước các thuộc tính biến đổi CSS một cách trực quan.