Tailwind CSS Traducir

Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Esta clase está acostumbrada a traducir elementos con transform. En CSS, lo hemos hecho usando la función CSS translate() .

Traducir clases:

  • translate-x-{cantidad}: esta clase contiene la longitud de la traducción correspondiente al eje x.
  • -translate-x-{cantidad}: este parámetro contiene la longitud de la traducción correspondiente al eje x inverso.
  • translate-y-{cantidad}: este parámetro contiene la longitud de la traducción correspondiente al eje y.
  • -translate-y-{cantidad}: este parámetro contiene la longitud de la traducción correspondiente al eje y inverso.

Nota: La cantidad depende totalmente de sus elecciones, puede configurarla como un porcentaje completo o directamente poner el valor rem.

Sintaxis:

<element class="translate-{axis}-{amount}">...</element>

Ejemplo:

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> 

Producción:

Tailwind CSS traducir clase

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *