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

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

Créer des formes irrégulières en CSS peut être une tâche difficile, mais ce n'est pas impossible. Avec la bonne combinaison de transformations CSS, vous pouvez créer des designs uniques et accrocheurs. Dans cet article, nous allons vous montrer comment créer une forme carrée irrégulière en utilisant CSS.

Problème :

Comment puis-je créer cette forme carrée irrégulière en utilisant CSS ?

[Image du carré irrégulier Forme]

Solution :

Pour créer une forme carrée irrégulière, vous pouvez utiliser le code CSS suivant :

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

Le La propriété perspective crée un espace 3D dans lequel les transformations sont appliquées. Les propriétés rotateX, rotateY et rotateZ font pivoter l'élément autour des axes x, y et z, respectivement.

Utilisation de ces transformations , vous pouvez créer une forme carrée irrégulière qui semble inclinée et pivotée. Vous pouvez ajuster les valeurs des propriétés rotateX, rotateY et rotateZ pour créer différentes orientations et angles.

Structure HTML :

Pour utiliser ce code, ajoutez simplement un

élément avec l'attribut class défini sur "box" dans votre document HTML :

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

La forme carrée résultante apparaîtra sur votre page Web sous la forme d'un cube irrégulier. Vous pouvez expérimenter avec le code CSS pour créer différentes variations de la forme carrée irrégulière.

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!

css html using class Attribute Property this

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn