Comment créer une forme carrée irrégulière avec des transformations CSS ?

Création d'une forme carrée irrégulière en CSS

Pour créer la forme carrée irrégulière représentée dans l'image, nous pouvons utiliser une combinaison de rotation et transformations de perspective en CSS. Cette technique nous permet de créer des effets de type 3D sans utiliser de logiciel de modélisation 3D complexe.

Code CSS :

<code class="css">.box {
  width: 150px;
  height: 120px;
  background: #f540a8;
  margin: 20px;
  transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}</code>

Marquage HTML :

<code class="html"><div class="box">
</div></code>

Explication :

• Perspective : Cette propriété crée l'illusion de profondeur en appliquant une perspective à l'élément. La valeur est définie sur 180 px.
• Transformations de rotation : Nous appliquons trois transformations de rotation le long de l'axe x (15 deg), de l'axe y (20 deg) et de l'axe z (-3deg). ). Ces rotations inclinent collectivement le carré et lui donnent sa forme irrégulière.

En combinant ces transformations, nous pouvons créer la forme carrée irrégulière souhaitée, comme le montre l'image.

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!