Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. El sesgo se utiliza para transformar un elemento en el plano 2D . Sesgar un elemento significa elegir un punto y empujarlo o tirarlo en diferentes direcciones. En CSS, podemos hacer eso usando la propiedad de sesgo de CSS.
Clases sesgadas:
- skew-x-{cantidad}: esta clase especifica el ángulo de inclinación correspondiente al eje x.
- -skew-x-{cantidad}: esta clase especifica el ángulo de inclinación correspondiente al eje x inverso.
- skew-y-{cantidad}: esta clase especifica el ángulo de inclinación correspondiente al eje y.
- -skew-y-{cantidad}: esta clase especifica el ángulo de inclinación correspondiente al eje y inverso.
Nota 1: sesgue un elemento habilitando primero las transformaciones con la utilidad de transformación y luego especificando el ángulo de sesgo usando las utilidades skew-x-{amount} y skew-y-{amount} .
Nota 2: La cantidad depende totalmente de sus elecciones, puede configurarla como un porcentaje completo o directamente poner el valor rem .
Sintaxis:
<element class="transform skew-{axis}-{amount}">...</element>
Ejemplo 1: Ángulo de sesgo correspondiente al eje x positivo y al eje y.
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 Skew 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 skew-x-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 skew-x-12" 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 skew-y-6" 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 skew-y-12" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)"> </div> </div> </body> </html>
Producción:
Ejemplo 2: ángulo de inclinación correspondiente al eje x y al eje y inversos .
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 Skew 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 -skew-x-6" 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 -skew-x-12" 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 -skew-y-6" 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 -skew-y-12" 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 aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA