Transformación CSS Tailwind

Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Esta clase se utiliza para controlar el comportamiento de transformación de cualquier elemento. En CSS, podemos hacer eso usando la propiedad de transformación de CSS .

Transformar clases:

transform: Para realizar cualquier transformación tienes que usar esta clase.
transform-gpu: al usar esta clase, la transformación se ejecutará en GPU en CPU que funcionará de una manera más relajante.
transform-none: Esta clase se utiliza para desactivar el efecto de transformación.

Sintaxis:

<element class="transform-{trans-on}">...</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 Transform Class</b> 
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between 
                grid grid-rows-1 
                grid-flow-col"> 
      
    <div title="bg-left-top"
        class="bg-no-repeat
               w-16 h-16
               my-4 transform skew-y-12" 
        style= 
        "background-image:url( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div> 
    <div title="bg-left"
        class="bg-no-repeat 
               w-16 h-16
               my-4 transform rotate-45" 
        style= 
        "background-image:url( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div> 
    <div title="bg-left-bottom"
        class="bg-no-repeat 
               w-16 h-16 
               my-4 transform scale-50" 
        style="background-image:url( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div> 
    <div title="bg-left-bottom"
        class="bg-no-repeat 
               w-16 h-16 
               my-4 transform translate-x-4 translate-y-4" 
        style="background-image:url( 
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> 
    </div>
    </div> 
</body> 
</html>

Producción:

Clase de transformación Tailwind CSS

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta