Erstellen eines verzerrten Effekts mit CSS-Transformationen

Im Bereich des Webdesigns bieten CSS-Transformationen ein leistungsstarkes Werkzeug zur Manipulation von Elementen im Raum. Einer der faszinierenden Effekte, die Sie erzielen können, ist die Schrägstellung, die einem Element ein geneigtes oder verzerrtes Aussehen verleiht.

Eckenschräge mit CSS-Transformationen erreichen

Es stellt sich die Frage: Wie geht das? Erstellen Sie einen schrägen Effekt wie im bereitgestellten Beispiel, bei dem beide Ecken geneigt sind?

Antwort:

Um diesen Effekt zu erzielen, können Sie die Transformationseigenschaft in Verbindung mit verwenden Perspektive und drehenY. Hier ist ein Beispiel:

.red.box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}

Erläuterung:

• Perspektive: Definiert die Fluchtpunkt für die Transformation, wodurch ein 3D-Effekt entsteht. Ein höherer Wert simuliert einen größeren Abstand.
• rotateY: Dreht das Element entlang der Y-Achse und verleiht ihm ein schräges Aussehen. Ein positiver Wert dreht sich im Uhrzeigersinn und umgekehrt.

Durch die Kombination dieser Eigenschaften können Sie einen Schrägungseffekt erzeugen, der beide Ecken des Elements transformiert, wie im Beispielbild gezeigt.