Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades funcionales están cubiertas en forma de clase. Esta clase se utiliza para cambiar el tamaño del elemento en el plano 2D. Escala los elementos en direcciones horizontales y verticales. En CSS, podemos hacer eso usando la función scale() de CSS .
Clases de escala:
- scale-0|50|75|90|95|100|105|110|125|150: Esta clase se usa para escalar en ambos ejes en forma de porcentaje.
- scale-x-0|50|75|90|95|100|105|110|125|150: Esta clase se usa para escalar en el eje x en forma de porcentaje.
- scale-y-0|50|75|90|95|100|105|110|125|150: Esta clase se usa para escalar en el eje y en forma de porcentaje.
Sintaxis:
<element class="scale-{axis-percentage}">...</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 Scale 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 scale-50" 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 scale-75" 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 scale-100" 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 scale-125" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> </body> </html>
Producción:
Clase de escala 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