Maison > interface Web > tutoriel CSS > le corps du texte

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

Patricia Arquette
Libérer: 2024-11-01 09:07:02
original
588 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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal