Inclinar um elemento utilizando CSS 3 com a propriedade transform(skew)

Post ensinando a como inclinar um elemento utilizando CSS 3, as propriedades utilizadas foram transform e transition-duration, código CSS completo que utilizado no exemplo está incluso no final da página.

como inclinar um elemento com CSS

Exemplos da animação

Inclinando para direita, passe o mouse encima do elemento abaixo:

Passe o mouse

Inclinando para esquerda

Passe o mouse

CSS utilizado para o efeito

.skew {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.skew:hover, .skew:focus, .skew:active {
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
}
.skew-backward {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.skew-backward:hover, .skew-backward:focus, .skew-backward:active {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

Altere a propriedade transition-duration para mudar a velocidade de execução da animação, o valor deverá ser em segundos.

Para alterar o angulo de inclinação mude: transform: skew(-10deg) que está em 10 graus para a quantidade desejada.

CSS minificado

CSS minificado para você incluir em seu projeto:

.skew,.skew-forward{display:inline-block;vertical-align:middle;box-shadow:0 0 1px transparent}.skew{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform}.skew:active,.skew:focus,.skew:hover{-webkit-transform:skew(-10deg);transform:skew(-10deg)}.skew-forward{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform-origin:0 100%;transform-origin:0 100%}.skew-forward:active,.skew-forward:focus,.skew-forward:hover{-webkit-transform:skew(-10deg);transform:skew(-10deg)}

 

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *