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

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>

<code class="html"><div class="box"></div></code>

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!