Comment créer une forme carrée irrégulière avec CSS ?-tutoriel CSS-php.cn

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

Patricia Arquette

Libérer： 2024-11-01 09:07:02

original

498 Les gens l'ont consulté

How to Create an Irregular Square Shape with 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>

Copier après la connexion

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>

Copier après la connexion

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!