Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit CSS unregelmäßige Quadrate erstellen?

Wie kann ich mit CSS unregelmäßige Quadrate erstellen?

Barbara Streisand
Barbara StreisandOriginal
2024-11-03 17:38:03665Durchsuche

How Can I Create Irregular Squares with CSS?

Unregelmäßige quadratische Formen mit CSS erstellen

Stellen Sie sich ein Quadrat vor, das sich der herkömmlichen Symmetrie widersetzt? CSS bietet die Werkzeuge, um unregelmäßige Formen wie die im Bild dargestellte zu erstellen.

Das Geheimnis liegt in der cleveren Verwendung von Transformationseigenschaften, vor allem Perspektive, rotierenX, rotierenY und rotierenZ. Mit diesen Eigenschaften können Sie die 3D-Ausrichtung der Form manipulieren und so die Illusion unregelmäßiger Winkel und Tiefen erzeugen.

Im bereitgestellten Beispiel führt der CSS-Code diese Transformation durch:

<code class="css">.box {
  width: 150px;
  height: 120px;
  background: #f540a8;
  margin: 20px;
  transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}</code>
  • Perspektive: Legt einen Fluchtpunkt fest und erzeugt die Illusion von Tiefe.
  • RotateX: Neigt die Form entlang der x-Achse (horizontal).
  • RotateY: Dreht die Form entlang der y-Achse (vertikal).
  • RotateZ: Dreht die Form entlang der z-Achse (senkrecht zur Seite).

Durch das Experimentieren mit diesen Werten können Sie eine große Auswahl an unregelmäßigen quadratischen Formen erzielen und Ihren Designs eine einzigartige Note verleihen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS unregelmäßige Quadrate erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn