Função skew
A função skew define a inclinação de um elemento,
transformando-o assim de um retângulo
em um paralelogramo. É usada em conjunto
com a propriedade transform.
O valor da propriedade é um ângulo em qualquer unidade
de ângulos. A inclinação é realizada em torno
do ponto definido pela propriedade transform-origin.
Pode aceitar um ou dois parâmetros, listados separados por vírgula. Se houver dois parâmetros - o primeiro parâmetro define a inclinação horizontal, e o segundo - a vertical. Se houver apenas um parâmetro - ele define a inclinação horizontal (e não em ambos os lados). Os parâmetros podem ser positivos ou negativos.
Sintaxe
seletor {
transform: skew(um ou dois ângulos);
}
Exemplo
Neste exemplo, o bloco é inclinado em 30
graus para a esquerda:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplo
Neste exemplo, o bloco é inclinado em 30
graus para a direita:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplo
Neste exemplo, o bloco é inclinado em 30
graus na vertical (valor positivo):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplo
Neste exemplo, o bloco é inclinado em 30
graus na vertical (valor negativo):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplo
Definindo a inclinação simultaneamente nos eixos X e Y:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
