Comment créer des formes carrées irrégulières à l'aide de transformations CSS ?

Création de formes carrées irrégulières avec CSS

Pour obtenir la forme unique représentée dans l'image fournie à l'aide de CSS, une combinaison de transformations de rotation et de perspective est employé. L'extrait de code suivant montre comment :

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

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

Explication :

• perspective(180px) : crée une perspective 3D, donnant l'illusion de profondeur.
• rotateX(15deg) : fait pivoter la boîte de 15 degrés autour de l'axe X.
• rotateY(20deg) : fait pivoter la boîte de 20 degrés autour de l'axe Y.
• rotateZ(-3deg) : fait pivoter la boîte de 3 degrés dans le sens inverse des aiguilles d'une montre autour de l'axe Z.

En combinant ces transformations, la forme carrée est déformée et inclinée, ce qui donne la forme irrégulière illustrée dans l'image. image de référence.

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!