Réalisation d'une inclinaison avec la transformation CSS : inclinaison des deux côtés

L'image fournie présente un effet d'inclinaison intrigant qui incline les deux coins d'un élément. Pour recréer cet effet à l'aide de la transformation CSS, procédez comme suit :

Application de l'inclinaison de perspective :

Pour ajouter une perspective, utilisez la propriété CSS suivante :

transform: perspective(distance) rotateY(angle);

Remplacez "distance" par une valeur pour définir la distance de perspective (des valeurs plus élevées créent une perspective plus éloignée). Remplacez "angle" par l'angle de rotation souhaité (45 degrés dans ce cas).

Exemple CSS :

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

Code HTML :

Pour appliquer l'inclinaison à un élément, ajoutez la classe suivante :

Exemple de ressource externe :

Le code CSS et HTML fourni est dérivé de http://desandro.github.com/3dtransforms/docs /perspective.html. Ce site Web propose d'autres exemples et de la documentation sur l'utilisation des transformations de perspective.