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:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA