Conseguindo inclinação com transformação CSS: inclinação de ambos os lados

A imagem fornecida mostra um efeito de inclinação intrigante que inclina ambos os cantos de um elemento. Para recriar esse efeito usando a transformação CSS, siga estas etapas:

Aplicando inclinação de perspectiva:

Para adicionar perspectiva, use a seguinte propriedade CSS:

transform: perspective(distance) rotateY(angle);

Substitua "distance" por um valor para definir a distância da perspectiva (valores mais altos criam uma perspectiva mais distante). Substitua "ângulo" pelo ângulo de rotação desejado (45 graus neste caso).

CSS de exemplo:

.red-box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}

Código HTML:

Para aplicar a inclinação a um elemento, adicione a seguinte classe:

Exemplo de recurso externo:

Os códigos CSS e HTML fornecidos são derivados de http://desandro.github.com/3dtransforms/docs /perspectiva.html. Este site oferece mais exemplos e documentação sobre o uso de transformações de perspectiva.