Wie kann man mit CSS3-Transformationen nur eine Seite eines Elements verzerren?

CSS3-Transformation nur auf einer Seite verzerren

CSS-Transformationen sind ein leistungsstarkes Tool, mit dem sich das Erscheinungsbild von Elementen auf einer Webseite manipulieren lässt. Eine der vielseitigsten Transformationen ist die Skew-Transformation, mit der ein Element in einem bestimmten Winkel geneigt werden kann.

Allerdings wirkt sich die Skew-Transformation standardmäßig auf beide Seiten eines Elements gleichermaßen aus. Dies kann in einigen Fällen einschränkend sein, beispielsweise wenn Sie nur eine Seite eines Elements, beispielsweise eines Hintergrundbilds, neigen möchten.

Glücklicherweise gibt es eine Möglichkeit, mithilfe von CSS nur eine Seite eines Elements zu neigen . Durch die Verwendung eines verschachtelten Div für das Element, das Sie verzerren möchten, können Sie die Verzerrungstransformation auf das übergeordnete Div und dann die entgegengesetzte Verzerrungstransformation auf das untergeordnete Div anwenden. Dadurch wird effektiv nur eine Seite des Elements verzerrt.

Hier ist ein Beispiel, wie man nur eine Seite eines Elements verzerrt:

.container {
  overflow: hidden;
}

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

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}

Dieses CSS erstellt ein Div mit einem roten Hintergrund und eine Breite und Höhe von 150 bzw. 100 Pixel. Das Div wird in einem Winkel von 20 Grad nach rechts geneigt und enthält ein Bild. Die Verzerrung des Bildes wird aufgehoben, indem die entgegengesetzte Verzerrungstransformation (-20 Grad) darauf angewendet wird.

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