Wie erstelle ich mit CSS-Transformationen eine unregelmäßige quadratische Form?

Erstellen einer unregelmäßigen quadratischen Form in CSS

Um die im Bild dargestellte unregelmäßige quadratische Form zu erstellen, können wir eine Kombination aus Drehung und verwenden Perspektiventransformationen in CSS. Mit dieser Technik können wir 3D-ähnliche Effekte erstellen, ohne komplexe 3D-Modellierungssoftware zu verwenden.

CSS-Code:

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

HTML-Markup:

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

Erklärung:

• Perspektive: Diese Eigenschaft erzeugt die Illusion von Tiefe, indem sie eine Perspektive auf das Element anwendet. Der Wert ist auf 180 Pixel eingestellt.
• Rotationstransformationen: Wir wenden drei Rotationstransformationen entlang der X-Achse (15 Grad), der Y-Achse (20 Grad) und der Z-Achse (-3 Grad) an ). Diese Drehungen verzerren zusammen das Quadrat und verleihen ihm seine unregelmäßige Form.

Durch die Kombination dieser Transformationen können wir die gewünschte unregelmäßige quadratische Form erzeugen, wie im Bild zu sehen.

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