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

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!