skew

skew

Utilidades para sesgar elementos con transform.

Clase Estilos

Clase	Estilos
`skew-<number>`	`transform: skewX(<number>deg) skewY(<number>deg);`
`-skew-<number>`	`transform: skewX(-<number>deg) skewY(-<number>deg);`
`skew-(<custom-property>)`	`transform: skewX(var(<custom-property>)) skewY(var(<custom-property>));`
`skew-[<value>]`	`transform: skewX(<value>) skewY(<value>);`
`skew-x-<number>`	`transform: skewX(<number>deg));`
`-skew-x-<number>`	`transform: skewX(-<number>deg));`
`skew-x-(<custom-property>)`	`transform: skewX(var(<custom-property>));`
`skew-x-[<value>]`	`transform: skewX(<value>));`
`skew-y-<number>`	`transform: skewY(<number>deg);`
`-skew-y-<number>`	`transform: skewY(-<number>deg);`
`skew-y-(<custom-property>)`	`transform: skewY(var(<custom-property>));`
`skew-y-[<value>]`	`transform: skewY(<value>);`

skew-<number>

transform: skewX(<number>deg) skewY(<number>deg);

-skew-<number>

transform: skewX(-<number>deg) skewY(-<number>deg);

skew-(<custom-property>)

transform: skewX(var(<custom-property>)) skewY(var(<custom-property>));

skew-[<value>]

transform: skewX(<value>) skewY(<value>);

skew-x-<number>

transform: skewX(<number>deg));

-skew-x-<number>

transform: skewX(-<number>deg));

skew-x-(<custom-property>)

transform: skewX(var(<custom-property>));

skew-x-[<value>]

transform: skewX(<value>));

skew-y-<number>

transform: skewY(<number>deg);

-skew-y-<number>

transform: skewY(-<number>deg);

skew-y-(<custom-property>)

transform: skewY(var(<custom-property>));

skew-y-[<value>]

transform: skewY(<value>);

Ejemplos

Ejemplo básico

Usa utilidades skew-<number> como skew-4 y skew-10 para sesgar un elemento en ambos ejes:

skew-3

skew-6

skew-12

<img class="skew-3 ..." src="/img/mountains.jpg" />
<img class="skew-6 ..." src="/img/mountains.jpg" />
<img class="skew-12 ..." src="/img/mountains.jpg" />

Usando valores negativos

Usa utilidades -skew-<number> como -skew-4 y -skew-10 para sesgar un elemento en ambos ejes:

-skew-3

-skew-6

-skew-12

<img class="-skew-3 ..." src="/img/mountains.jpg" />
<img class="-skew-6 ..." src="/img/mountains.jpg" />
<img class="-skew-12 ..." src="/img/mountains.jpg" />

Sesgando en el eje x

Usa utilidades skew-x-<number> como skew-x-4 y -skew-x-10 para sesgar un elemento en el eje x:

-skew-x-12

skew-x-6

skew-x-12

<img class="-skew-x-12 ..." src="/img/mountains.jpg" />
<img class="skew-x-6 ..." src="/img/mountains.jpg" />
<img class="skew-x-12 ..." src="/img/mountains.jpg" />

Sesgando en el eje y

Usa utilidades skew-y-<number> como skew-y-4 y -skew-y-10 para sesgar un elemento en el eje y:

-skew-y-12

skew-y-6

skew-y-12

<img class="-skew-y-12 ..." src="/img/mountains.jpg" />
<img class="skew-y-6 ..." src="/img/mountains.jpg" />
<img class="skew-y-12 ..." src="/img/mountains.jpg" />

Usando un valor personalizado

Usa la sintaxis skew-[<value>] para establecer el skew basado en un valor completamente personalizado:

<img class="skew-[3.142rad] ..." src="/img/mountains.jpg" />

Para variables CSS, también puedes usar la sintaxis skew-(<custom-property>) :

<img class="skew-(--my-skew) ..." src="/img/mountains.jpg" />

Esto es solo un atajo para skew-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija skewX() y skewY() utilidades con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<img class="skew-3 md:skew-12 ..." src="/img/mountains.jpg" />

Aprende más sobre el uso de variantes en la documentación de variantes.

En esta página