Wie kann ich mithilfe von CSS3-Transformationen nur eine Seite eines Bildes verzerren?

Eine Seite mit CSS3-Transformation neigen

Ein Bild in CSS3 zu neigen ist eine einfache Aufgabe, aber nur eine Seite zu neigen kann etwas schwieriger sein.

Die bereitgestellte Lösung mit Rahmeneigenschaften ist nicht geeignet, wenn Sie einen Bildhintergrund anstelle einer Volltonfarbe haben. Darüber hinaus kann es einschränkend sein, beide Seiten des Elements zu neigen, anstatt nur eine.

Um eine einseitige Neigung zu erreichen, ziehen Sie diesen Ansatz in Betracht:

Entzerren des Bildes

Verwenden Sie ein verschachteltes div-Element, um das Bild zu speichern. Wenden Sie einen entgegengesetzten Skew-Wert auf das verschachtelte Div an, um der auf das übergeordnete Element angewendeten Skew entgegenzuwirken.

Beispielcode:

<div class="container">
  <div>
<pre class="brush:php;toolbar:false">.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(image.jpg); /* Replace with your image URL */
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

Dieses Setup führt effektiv nur zu einer Skew eine Seite des Bildes, während die andere Seite gerade bleibt. Der schräge Bereich bleibt aufgrund der overflow:hidden-Eigenschaft im übergeordneten Container transparent.