-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
-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ìnhmodule.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