Wie kann ich mit CSS Transform Perspective eine Trapezform erstellen?

Trapeze mit CSS3 zeichnen

Das Erstellen von Trapezen mit CSS3 erfordert einige clevere Techniken. Trotz des Vorschlags, die CSS3-3D-Transformation zu verwenden, erforschen wir eine moderne Methode unter Verwendung der CSS-Transformationsperspektive.

CSS-Transformationsperspektive

Die CSS-Transformationsperspektive-Eigenschaft führt einen 3D-Raum für ein Elemente, sodass sie sich um eine bestimmte Perspektive drehen können. Indem wir einem Element einen perspektivischen Wert zuweisen und es dann entlang einer der Achsen (X, Y oder Z) drehen, können wir die Illusion eines Trapezes erzeugen.

Beispiel

Bedenken Sie den folgenden CSS-Code:

HTML:

In diesem Beispiel: Das Element mit der Klasse .trapezoid ist mit einer Breite und Höhe von 200 Pixeln, einem roten Hintergrund und einer Transformation konfiguriert, die eine Perspektive von 10 Pixeln und eine Drehung von 1 Grad entlang der X-Achse anwendet.

Das resultierende Element erscheint als Trapez mit einer leicht geneigten Ober- und Unterseite. Der Effekt wird umso ausgeprägter, je größer der Perspektivenwert ist.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS Transform Perspective eine Trapezform erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!