Tailwind CSS es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita. Las utilidades Tailwind CSS Transform se utilizan para controlar el comportamiento de transformación de cualquier elemento. Esta clase se usa para transformar el elemento como rotación, escalado, traducción del elemento.
- Transformación CSS Tailwind
- Tailwind CSS Transform Origin
- Escala CSS de viento de cola
- Tailwind CSS Rotar
- Tailwind CSS Traducir
El siguiente ejemplo le dará una breve idea sobre las transformaciones de Tailwind CSS:
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 Rotate 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 rotate-0" 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 rotate-45" 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 rotate-90" 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 rotate-180" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> </body> </html>
Producción:
Transformaciones Tailwind CSS
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA