Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erstelle ich unregelmäßige quadratische Formen mithilfe von CSS-Transformationen?

Barbara Streisand
Freigeben: 2024-11-04 14:57:30
Original
854 Leute haben es durchsucht

How to Create Irregular Square Shapes Using CSS Transformations?

Unregelmäßige quadratische Formen mit CSS erstellen

Um die einzigartige Form zu erreichen, die im bereitgestellten Bild dargestellt wird, verwenden Sie CSS, eine Kombination aus Drehung und perspektivischen Transformationen beschäftigt ist. Das folgende Code-Snippet zeigt, wie:

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

Erklärung:

  • perspective(180px): Erstellt eine 3D-Perspektive und vermittelt die Illusion von Tiefe.
  • rotateX(15deg): Dreht die Box um 15 Grad um die X-Achse.
  • rotateY(20deg): Dreht die Box um 20 Grad um die Y-Achse.
  • rotateZ(-3deg): Dreht die Box um 3 Grad gegen den Uhrzeigersinn um die Z-Achse.

Durch die Kombination dieser Transformationen wird die quadratische Form verzerrt und geneigt, was zu der unregelmäßigen Form führt, die im gezeigt wird Referenzbild.

Das obige ist der detaillierte Inhalt vonWie erstelle ich unregelmäßige quadratische Formen mithilfe von CSS-Transformationen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage