Lớp này chấp nhận nhiều giá trị trong tailwind CSS, tất cả thuộc tính được bao phủ dưới dạng lớp. Lớp này được dùng để dịch các phần tử bằng thuộc tính transform. Trong CSS, chúng ta thực hiện điều đó bằng CSS translate() function.
Các lớp Translate:
- translate-x-{amount}: Lớp này giữ chiều dài dịch chuyển tương ứng với trục x.
- -translate-x-{amount}: Tham số này giữ chiều dài dịch chuyển tương ứng với trục x ngược.
- translate-y-{amount}: Tham số này giữ chiều dài dịch chuyển tương ứng với trục y.
- -translate-y-{amount}: Tham số này giữ chiều dài dịch chuyển tương ứng với trục y ngược.
Lưu ý: Giá trị Amount hoàn toàn phụ thuộc vào lựa chọn của bạn. Bạn có thể đặt nó ở dạng phần trăm hoặc rem.
Cú pháp:
<element class="translate-{axis}-{amount}">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Translate Class</b>
<div class="bg-green-300
mx-16
p-4
justify-between
grid grid-flow-col">
<div class="bg-no-repeat
w-16 h-16 transform translate-x-16"
style=
"background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div class="bg-no-repeat
w-16 h-16 transform translate-y-16"
style=
"background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div class="bg-no-repeat
w-16 h-16 transform -translate-x-16"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div class="bg-no-repeat
w-16 h-16 transform -translate-y-16"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
</div>
</body>
</html>
Kết quả:
