Escala CSS de viento de cola

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

Deja una respuesta

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