Comment obtenir une inclinaison avec la transformation CSS : inclinaison des deux côtés

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, suivez ces étapes :

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 :

<div class="red-box"></div>

Exemple de ressource externe :

Le CSS et le HTML fournis le code 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!