Comment puis-je créer une forme trapézoïdale à l'aide de CSS Transform Perspective ?

Dessiner des trapèzes avec CSS3

Créer des trapèzes avec CSS3 nécessite des techniques intelligentes. Malgré la suggestion d'utiliser la transformation 3D CSS3, nous explorons une méthode moderne utilisant la perspective de transformation CSS.

Perspective de transformation CSS

La propriété Perspective de transformation CSS introduit un espace 3D pour éléments, leur permettant de pivoter autour d’une perspective spécifiée. En appliquant une valeur de perspective à un élément puis en le faisant pivoter le long de l'un des axes (X, Y ou Z), nous pouvons créer l'illusion d'un trapèze.

Exemple

Considérez le code CSS suivant :

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}

HTML :

<div class="trapezoid"></div>

Dans cet exemple, l'élément de classe .trapezoid est configuré avec une largeur et une hauteur de 200 pixels, un fond rouge et une transformation qui applique une perspective de 10 pixels et une rotation de 1 degré le long de l'axe X.

L'élément résultant apparaîtra comme un trapèze avec un haut et un bas légèrement inclinés. L'effet devient plus prononcé à mesure que la valeur de perspective augmente.

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!