Comment puis-je créer des carrés irréguliers avec CSS ?

Créer des formes carrées irrégulières avec CSS

Vous envisagez un carré qui défie la symétrie conventionnelle ? CSS fournit les outils nécessaires pour créer des formes irrégulières comme celle présentée dans l'image.

Le secret réside dans l'utilisation intelligente des propriétés de transformation, principalement la perspective, rotateX, rotateY et rotateZ. Ces propriétés vous permettent de manipuler l'orientation 3D de la forme, créant l'illusion d'angles et de profondeurs irréguliers.

Dans l'exemple fourni, le code CSS réalise cette transformation :

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

• Perspective : Établit un point de fuite, créant l'illusion de profondeur.
• RotateX : Incline la forme le long de l'axe x (horizontal).
• RotateY : Fait pivoter la forme le long de l'axe y (vertical).
• RotateZ : Fait pivoter la forme le long de l'axe z (perpendiculaire à la page).

En expérimentant ces valeurs, vous pouvez obtenir une large gamme de formes carrées irrégulières, ajoutant une touche unique à vos créations.

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!