Heim > Web-Frontend > CSS-Tutorial > Wie kann man mit CSS3-Transformationen nur eine Seite eines Elements verzerren?

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

Mary-Kate Olsen
Freigeben: 2024-12-08 03:04:11
Original
305 Leute haben es durchsucht

How to Skew Only One Side of an Element with CSS3 Transforms?

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);
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage