Chuyển đổi: dịch CSS

Giá trị Ví dụ Hiển thị Bình thường biến đổi. dịch(0px,0px);
-moz-biến đổi. dịch(0px,0px);
-webkit-biến đổi. dịch(0px,0px);
-o-biến đổi. dịch(0px,0px);
-ms-biến đổi. dịch(0px,0px);

biến đổi

dịch(0,y) biến đổi. dịch(0px,20px);
-moz-biến đổi. dịch(0px,20px);
-webkit-biến đổi. dịch(0px,20px);
-o-biến đổi. dịch(0px,20px);
-ms-biến đổi. dịch(0px,20px);

biến đổi

biến đổi. dịch(0px,10px);
-moz-biến đổi. dịch(0px,10px);
-webkit-biến đổi. dịch(0px,10px);
-o-biến đổi. dịch(0px,10px);
-ms-biến đổi. dịch(0px,10px);

biến đổi

biến đổi. dịch(0px,0px);
-moz-biến đổi. dịch(0px,0px);
-webkit-biến đổi. dịch(0px,0px);
-o-biến đổi. dịch(0px,0px);
-ms-biến đổi. dịch(0px,0px);

biến đổi

biến đổi. dịch(0px,-10px);
-moz-biến đổi. dịch(0px,-10px);
-webkit-biến đổi. dịch(0px,-10px);
-o-biến đổi. dịch(0px,-10px);
-ms-biến đổi. dịch(0px,-10px);

biến đổi

biến đổi. dịch(0px,-20px);
-moz-biến đổi. dịch(0px,-20px);
-webkit-biến đổi. dịch(0px,-20px);
-o-biến đổi. dịch(0px,-20px);
-ms-biến đổi. dịch(0px,-20px);

biến đổi

dịch (x, 0) biến đổi. dịch(20px,0px);
-moz-biến đổi. dịch(20px,0px);
-webkit-biến đổi. dịch(20px,0px);
-o-biến đổi. dịch(20px,0px);
-ms-biến đổi. dịch(20px,0px);

biến đổi

biến đổi. dịch(10px,0px);
-moz-biến đổi. dịch(10px,0px);
-webkit-biến đổi. dịch(10px,0px);
-o-biến đổi. dịch(10px,0px);
-ms-biến đổi. dịch(10px,0px);

biến đổi

biến đổi. dịch(0px,0px);
-moz-biến đổi. dịch(0px,0px);
-webkit-biến đổi. dịch(0px,0px);
-o-biến đổi. dịch(0px,0px);
-ms-biến đổi. dịch(0px,0px);

biến đổi

biến đổi. dịch(-10px,0px);
-moz-biến đổi. dịch(-10px,0px);
-webkit-biến đổi. dịch(-10px,0px);
-o-biến đổi. dịch(-10px,0px);
-ms-biến đổi. dịch(-10px,0px);

biến đổi

biến đổi. dịch(-20px,0px);
-moz-biến đổi. dịch(-20px,0px);
-webkit-biến đổi. dịch(-20px,0px);
-o-biến đổi. dịch(-20px,0px);
-ms-biến đổi. dịch(-20px,0px);

biến đổi

dịch (x, y) biến đổi. dịch(20px,20px);
-moz-biến đổi. dịch(20px,20px);
-webkit-biến đổi. dịch(20px,20px);
-o-biến đổi. dịch(20px,20px);
-ms-biến đổi. dịch(20px,20px);

biến đổi

biến đổi. dịch(10px,10px);
-moz-biến đổi. dịch(10px,10px);
-webkit-biến đổi. dịch(10px,10px);
-o-biến đổi. dịch(10px,10px);
-ms-biến đổi. dịch(10px,10px);

biến đổi

biến đổi. dịch(0px,0px);
-moz-biến đổi. dịch(0px,0px);
-webkit-biến đổi. dịch(0px,0px);
-o-biến đổi. dịch(0px,0px);
-ms-biến đổi. dịch(0px,0px);

biến đổi

biến đổi. dịch(-10px,-10px);
-moz-biến đổi. dịch(-10px,-10px);
-webkit-biến đổi. dịch(-10px,-10px);
-o-biến đổi. dịch(-10px,-10px);
-ms-biến đổi. dịch(-10px,-10px);

biến đổi

biến đổi. dịch(-20px,-20px);
-moz-biến đổi. dịch(-20px,-20px);
-webkit-biến đổi. dịch(-20px,-20px);
-o-biến đổi. dịch(-20px,-20px);
-ms-biến đổi. dịch(-20px,-20px);

biến đổi

Hàm chuyển đổi cho bản dịch 2d đặt vị trí của một phần tử thành một phần tử mới, được mô tả bởi hai vectơ (x, y). Giá trị y là tùy chọn

cú pháp

• Phiên dịch ()
• Phiên dịch (,)

Thông số

dịch-giá-trị-x

Giá trị cho bản dịch qua trục x. Có thể là giá trị độ dài hoặc giá trị phần trăm. Giá trị cho phép dịch trục y được coi là bằng không

dịch-giá-trị-x, dịch-giá-trị-y

Giá trị đầu tiên mô tả bản dịch qua trục x, giá trị thứ hai qua trục y. Giá trị có thể là độ dài hoặc giá trị phần trăm

ví dụ

Ví dụ này hiển thị ba phần tử div, được chuyển đổi riêng lẻ bằng hàm translate()

Để sử dụng giá trị dịch âm, hãy thêm dấu gạch ngang vào trước tên lớp để chuyển nó thành giá trị âm

Loại bỏ biến đổi

Để xóa tất cả các biến đổi trên một phần tử cùng một lúc, hãy sử dụng tiện ích transform-none

Điều này có thể hữu ích khi bạn muốn xóa biến đổi theo điều kiện, chẳng hạn như khi di chuột hoặc tại một điểm dừng cụ thể

Tăng tốc phần cứng

Nếu quá trình chuyển đổi của bạn hoạt động tốt hơn khi được kết xuất bởi GPU thay vì CPU, bạn có thể buộc tăng tốc phần cứng bằng cách thêm tiện ích transform-gpu

Sử dụng transform-cpu để buộc mọi thứ trở lại CPU nếu bạn cần hoàn tác việc này một cách có điều kiện

---

áp dụng có điều kiện

Di chuột, tập trung và các trạng thái khác

Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng hover:translate-y-12 để chỉ áp dụng tiện ích

0 khi di chuột

Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States

Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng

1 để áp dụng tiện ích

0 chỉ với kích thước màn hình trung bình trở lên

Để tìm hiểu thêm, hãy xem tài liệu về Thiết kế đáp ứng, Chế độ tối và

---

Sử dụng các giá trị tùy chỉnh

Tùy chỉnh chủ đề của bạn

Theo mặc định, Tailwind cung cấp các tiện ích

3 giá trị cố định phù hợp với tỷ lệ giãn cách mặc định, cũng như các biến thể 50% và 100% để dịch tương ứng với kích thước của phần tử. Bạn có thể tùy chỉnh tỷ lệ giãn cách của mình bằng cách chỉnh sửa

4 hoặc

5 trong tệp

6 của bạn

________số 8_______

Ngoài ra, bạn chỉ có thể tùy chỉnh tỷ lệ dịch bằng cách chỉnh sửa

7 hoặc

8 trong tệp

6 của mình

module.exports = {
  theme: {
    extend: {
      translate: {
        '4.25': '17rem',
      }
    }
  }
}

Tìm hiểu thêm về cách tùy chỉnh chủ đề mặc định trong tài liệu

Giá trị tùy ý

Nếu bạn cần sử dụng giá trị

3 một lần không hợp lý để đưa vào chủ đề của mình, hãy sử dụng dấu ngoặc vuông để tạo nhanh một thuộc tính bằng cách sử dụng bất kỳ giá trị tùy ý nào

chuyển đổi dịch là gì (

Sự khác biệt giữa biến đổi và dịch trong CSS là gì?

Khi nào bạn nên sử dụng translate() thay vì định vị tuyệt đối?

Bản dịch trong CSS là gì?