Wie kann ich mithilfe der CSS3-Transformation nur eine Seite eines Elements verzerren?

CSS3-verzerrte Transformation auf einer Seite

Wenn Sie versuchen, mithilfe der Transformation in CSS3 einen verzerrten Effekt zu erzeugen, kann es schwierig sein, ihn nur auf eine Seite eines Elements anzuwenden , insbesondere wenn Sie mit Bildern arbeiten. Hier ist eine Lösung, mit der Sie diesen gewünschten Effekt erzielen können.

Der Schlüssel liegt in der Verwendung einer verschachtelten Div-Struktur. Weisen Sie die Skew-Transformation dem übergeordneten Div zu, auf das die Gesamtschiefe angewendet werden soll. Um jedoch das ursprüngliche Seitenverhältnis des Bildes beizubehalten, erstellen Sie ein untergeordnetes Div (z. B. eines, das das Bild als Hintergrund anzeigt) und wenden Sie einen entgegengesetzten Neigungswert darauf an.

Zum Beispiel, wenn ja B. ein übergeordnetes Div mit einer Neigung von 20 Grad, können Sie dem untergeordneten Div, das das Bild enthält, eine Neigung von -20 Grad zuweisen. Dadurch wird die Schiefe auf dem Bild aufgehoben, sodass es innerhalb des schiefen übergeordneten Divs unverzerrt erscheint.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe der CSS3-Transformation nur eine Seite eines Elements verzerren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!