Функция skew
La función skew define la inclinación de un elemento,
transformándolo así de un rectángulo
en un paralelogramo. Se utiliza junto
con la propiedad transform.
El valor de la propiedad es un ángulo en cualquier unidad
de ángulos. La inclinación se realiza alrededor
del punto definido por la propiedad transform-origin.
Puede aceptar uno o dos parámetros, separados por comas. Si hay dos parámetros, el primero define la inclinación horizontal y el segundo la vertical. Si solo hay un parámetro, este define la inclinación horizontal (y no en ambos ejes). Los parámetros pueden ser tanto positivos como negativos.
Sintaxis
selector {
transform: skew(uno o dos ángulos);
}
Ejemplo
En este ejemplo, el bloque está inclinado 30
grados hacia la izquierda:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Ejemplo
En este ejemplo, el bloque está inclinado 30
grados hacia la derecha:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Ejemplo
En este ejemplo, el bloque está inclinado 30
grados verticalmente (valor positivo):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Ejemplo
En este ejemplo, el bloque está inclinado 30
grados verticalmente (valor negativo):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Ejemplo
Definimos la inclinación simultáneamente en los ejes X e Y:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
