Tradução do Tailwind
Tailwind translate é usado para mover um elemento HTML ao longo dos eixos x e y .
Isso pode ser útil para criar animações, posicionar elementos em uma página ou fazer ajustes no layout de um site.
O utilitário translate funciona usando a propriedade transform do CSS para mover um elemento de sua posição original.
À medida que avançamos neste artigo, obteremos uma compreensão mais profunda da propriedade translate do Tailwind e suas classes com exemplos.
A quantidade de tradução pode ser especificada usando diferentes classes no Tailwind.
Ele pode ser usado de várias maneiras para criar animações e efeitos simples ou complexos, tornando-se uma ferramenta valiosa no kit de ferramentas de qualquer desenvolvedor da web.
Cursos de tradução do Tailwind
Abaixo está uma explicação detalhada das classes de tradução do Tailwind:
| Aulas | Visão geral |
| traduzir-x-0 | Os elementos são movidos ao longo do eixo horizontal por zero pixels, o que significa que eles não se movem. |
| traduzir-y-0 | Os elementos são movidos ao longo do eixo vertical por zero pixels, o que significa que eles não se movem. |
| traduzir-x-px | Nesse caso, os elementos se movem ao longo do eixo x em 1px. |
| traduzir-y-px | Usando esta classe, os elementos se movem ao longo do eixo y em 1px. |
| traduzir-x-0.5 | Esta classe é usada para mover um elemento ao longo do eixo x em 0,125 rem ou 2px. |
| traduzir-y-0.5 | Esta classe ajuda a mover um elemento verticalmente em 0,125 rem ou 2px. |
| traduzir-x-1 | Os elementos se movem horizontalmente em 0,25 rem ou 4px. |
| traduzir-y-1 | Essa classe garante que um elemento se mova ao longo do eixo y em 0,25 rem ou 4px. |
| traduzir-x-1.5 | Ao usar esta classe, os elementos se movem 0,375 rem ou 6px ao longo do eixo x. |
| traduzir-y-1.5 | Essa classe move os elementos em 0,375 rem ou 6px ao longo do eixo y. |
| traduzir-x-2 | Ele move os elementos ao longo do eixo x em 0,5 rem ou 8px ao usar esta classe. |
| traduzir-y-2 | Com esta classe, os elementos se movem 0,5 rem ou 8px ao longo do eixo y. |
| traduzir-x-2.5 | Ele move os elementos em 0,675 rem ou 10px ao longo do eixo x. |
| traduzir-y-2.5 | Essa classe move os elementos em 0,675 rem ou 10px ao longo do eixo y. |
| traduzir-x-3 | Os elementos que usam esta classe movem-se 0,75 rem ou 12px ao longo do eixo x. |
| traduzir-y-3 | Nesse caso, os elementos se movem em 0,75 rem ou 12px ao longo do eixo y. |
| traduzir-x-3.5 | Usando esta classe, os elementos se movem horizontalmente em 0,875rem ou 14px. |
| traduzir-y-3.5 | Esta classe é usada para mover os elementos verticalmente em 0.875rem ou 14px. |
| traduzir-x-4 | Esta classe ajuda a mover um elemento horizontalmente em 1rem ou 16px. |
| traduzir-y-4 | Esta classe move os elementos em 1rem ou 16px ao longo do eixo y. |
| traduzir-x-5 | Ele move os elementos ao longo do eixo x em 1,25 rem ou 20px. |
| traduzir-y-5 | Com esta classe, os elementos se movem ao longo do eixo y em 1,25 rem ou 20 px. |
| traduzir-x-6 | Nesse caso, os elementos se movem horizontalmente em 1,5 rem ou 24px. |
| traduzir-y-6 | Usando esta classe, os elementos se movem horizontalmente em 1,5 rem ou 24px. |
| traduzir-x-7 | O elemento que usa esta classe se move horizontalmente em 1,75 rem ou 28px. |
| traduzir-y-7 | Ao usar esta classe, o elemento se move verticalmente em 1,75rem ou 28px. |
| traduzir-x-8 | Essa classe garante que um elemento se mova 2rem ou 32px ao longo do eixo x. |
| traduzir-y-8 | Os elementos que usam esta classe se movem 2 rem ou 32 px ao longo do eixo y. |
| traduzir-x-9 | Esta classe é usada para mover um elemento horizontalmente em 2.25rem ou 36px. |
| traduzir-y-9 | Com esta classe, os elementos se movem ao longo do eixo y em 2,25 rem ou 36px. |
| traduzir-x-10 | Usando esta classe, um elemento se move 2,5 rem ou 40px ao longo do eixo x. |
| traduzir-y-10 | Dá a um elemento um movimento no eixo y de 2,5 rem ou 40px. |
| traduzir-x-11 | Essa classe garante que um elemento se mova horizontalmente em 2,75 rem ou 44px. |
| traduzir-y-11 | Ao usar esta classe, um elemento se move verticalmente em 2,75 rem ou 44px. |
| traduzir-x-12 | Ele move um elemento ao longo do eixo x em 3rem ou 48px. |
| traduzir-y-12 | Um elemento é movido ao longo do eixo y por 3rem ou 48px. |
| traduzir-x-14 | Essa classe ajuda a mover um elemento ao longo do eixo x em 3,5 rem ou 56px. |
| traduzir-y-14 | Um elemento pode ser movido ao longo do eixo x em 3,5 rem ou 56px. |
| traduzir-x-16 | Usando esta classe, você pode mover um elemento ao longo do eixo y em 4rem ou 64px. |
| traduzir-y-16 | Mover um elemento ao longo do eixo y em 64px ou 4rem é possível por esta classe. |
| traduzir-x-20 | Esta classe é usada para mover um elemento em 5rem ou 80px ao longo do eixo x. |
| traduzir-y-20 | Usado para mover um elemento em 5rem ou 80px ao longo do eixo y. |
| traduzir-x-24 | Esta classe é utilizada para mover um elemento 6rem ou 96px ao longo do eixo x. |
| traduzir-y-24 | Um elemento é movido ao longo do eixo y por 6rem ou 96px. |
| traduzir-x-28 | Essa classe garante que um elemento se mova 7 rem ou 112 px ao longo do eixo x. |
| traduzir-y-28 | Usando esta classe, um elemento se move verticalmente por 7rem ou 112px. |
| traduzir-x-32 | Nesse caso, um elemento se move ao longo do eixo x em 8 rem ou 128 px. |
| traduzir-y-32 | Usando esta classe, um elemento se move 8rem ou 128px ao longo do eixo y. |
| traduzir-x-36 | Usado para mover um elemento em 9rem ou 144px ao longo do eixo x. |
| traduzir-y-36 | Esta classe move um elemento em 9rem ou 144px ao longo do eixo y. |
| traduzir-x-40 | Usando esta classe, um elemento move um elemento 10rem ou 160px ao longo do eixo x. |
| traduzir-y-40 | Nesse caso, um elemento move um elemento em 10rem ou 160px. |
| traduzir-x-44 | Esta classe é utilizada para mover um elemento 11rem ou 176px ao longo do eixo x. |
| traduzir-y-44 | Os elementos que usam esta classe movem um elemento 11rem ou 176px ao longo do eixo y. |
| traduzir-x-48 | Com esta classe, um elemento move um elemento em 12rem ou 192px. |
| traduzir-y-48 | Usado para mover um elemento em 12 rem ou 192 px ao longo do eixo y. |
| traduzir-x-52 | Ele move um elemento ao longo do eixo x em 13 rem ou 208 px. |
| traduzir-y-52 | Esta classe é usada para mover um elemento verticalmente em 13rem ou 208px. |
| traduzir-x-56 | Mover um elemento ao longo do eixo x em 224px ou 14rem é possível por esta classe. |
| traduzir-y-56 | Mover um elemento ao longo do eixo x em 224px ou 14rem é obtido usando esta classe. |
| traduzir-x-60 | O elemento que usa esta classe é movido horizontalmente por 15rem ou 240px. |
| traduzir-y-60 | Esta classe é usada para traduzir um elemento 240px ou 15rem ao longo do eixo y usando esta classe. |
| traduzir-x-64 | Esta classe garante que um elemento seja movido 256px ou 16rem horizontalmente usando esta classe. |
| traduzir-y-64 | Ajuda a mover um elemento 256px ou 16rem verticalmente. |
| traduzir-x-72 | Usado para mover um elemento em 18 rem ou 288 px ao longo do eixo x. |
| traduzir-y-72 | Essa classe ajuda a mover um elemento em 18 rem ou 288 px ao longo do eixo y. |
| traduzir-x-80 | Neste caso, um elemento é movido por 20rem ou 320px ao longo do eixo x. |
| traduzir-y-80 | Usando esta classe, um elemento é movido por 20 rem ou 320px ao longo do eixo y. |
| traduzir-x-96 | Esta classe é utilizada para mover um elemento em 24 rem ou 384 px ao longo do eixo x. |
| traduzir-y-96 | O elemento que usa essa classe é movido verticalmente por 24 rem ou 383 px ao longo do eixo y. |
| traduzir-x-1/2 | Um elemento pode ser movido horizontalmente ao longo do eixo x pela metade de sua largura usando esta classe. |
| traduzir-x-1/3 | Isso moverá o elemento ao longo do eixo x em um terço de sua própria largura. |
| traduzir-x-2/3 | Ele moverá o elemento ao longo do eixo x em dois terços de sua própria largura. |
| traduzir-x-1/4 | Esta classe é usada para mover um elemento em um quarto de sua própria largura. |
| traduzir-x-2/4 | Um elemento pode ser movido horizontalmente ao longo do eixo x pela metade de sua largura usando esta classe. |
| traduzir-x-3/4 | Ao fazer isso, moveremos o elemento em três quartos de sua própria largura ao longo do eixo x. |
| traduzir-x-completo | Isso moverá o elemento horizontalmente em sua largura total. |
| traduzir-y-1/2 | Isso moverá o elemento ao longo do eixo y pela metade de sua própria largura. |
| traduzir-y-1/3 | Essa classe é usada para mover um elemento em um terço de sua própria largura ao longo do eixo y. |
| traduzir-y-2/3 | Ao fazer isso, moveremos o elemento em dois terços de sua própria largura ao longo do eixo y. |
| traduzir-y-1/4 | Um elemento pode ser movido horizontalmente ao longo do eixo y em um quarto de sua largura usando esta classe. |
| traduzir-y-2/4 | Isso moverá o elemento ao longo do eixo y pela metade de sua própria largura. |
| traduzir-y-3/4 | Ele moverá o elemento ao longo do eixo y em três quartos de sua própria largura. |
| traduzir-y-completo | Isso moverá o elemento verticalmente em sua largura total. |
Nota : As classes mencionadas acima aplicarão a tradução positiva, que é para baixo para classes translate-y-num e para a direita para classes translate-x-num.
Para prefixar tradução negativa os nomes de classe com sinal negativo, como para translate-x-5, a classe de tradução negativa seria -translate-x-5.
Para translações negativas, a translação horizontal é para a esquerda, enquanto a translação vertical é para o topo.
Sintaxe
<element class="translate-x-4">...</element>
Para usar as classes de tradução do Tailwind, aplique as classes translate-x e translate-y para mover o elemento ao longo dos eixos x e y, respectivamente.
Os valores dessas classes podem ser especificados em pixels ou como uma porcentagem da largura ou altura do elemento.
O exemplo a seguir usa algumas classes de tradução no Tailwind para demonstração:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Translate Class in Tailwind
class="font-medium my-2 text-gray-500"Hover on the images for finding the class applied
class="bg-gray-200 w-full px-4 py-8 justify-between
grid grid-cols-2 gap-6 my-6"
class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center -translate-y-5" title="-translate-y-5" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center translate-x-9" title="translate-x-9" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center -translate-x-7" title="-translate-x-7" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center translate-y-6" title="translate-y-6" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
No exemplo abaixo, utilizamos algumas classes translate no Tailwind:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Translate Class in Tailwind
class="font-medium my-2 text-gray-500"Hover on the images for finding the class applied
class="bg-gray-200 w-full px-4 py-20 justify-between
grid grid-cols-2 gap-6 my-6"
class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center -translate-y-1/3" title="-translate-y-1/3" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center translate-x-1/2" title="translate-x-1/2" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center -translate-x-3/4" title="-translate-x-3/4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center translate-y-2/3" title="translate-y-2/3" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
Benefícios do Tailwind Translate
O utilitário de tradução do Tailwind oferece vários benefícios. Incluindo:
- A tradução do Tailwind permite que você posicione e mova facilmente elementos HTML sem precisar escrever CSS personalizado, o que pode economizar muito tempo de desenvolvimento.
- Tailwind translate fornece um conjunto consistente de classes de utilitários que podem ser usadas em todo o projeto, garantindo que todos os elementos HTML sejam estilizados de forma consistente em todo o site.
- O utilitário Tailwind translate fornece uma ampla variedade de classes que podem ser usadas para mover elementos ao longo do eixo x e do eixo y de várias maneiras, dando aos desenvolvedores muita flexibilidade no posicionamento e na animação de elementos.
- O utilitário de tradução do Tailwind é responsivo por padrão, o que significa que os elementos podem ser posicionados e movidos de forma que se adaptem a diferentes tamanhos de tela e tipos de dispositivos.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
