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.

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)}