Neigen Sie ein Bild an den Seiten ohne Verzerrung

Question

Ich möchte das Bild mit CSS in Eulen-Karussell schräg stellen.

SCSS:

.owl-item { 
    > div { 
     transform: skew(-20deg, 0); 
     overflow: hidden; 

     > img { 
      transform: skew(20deg, 0); 
     } 
    } 
} 

HTML:

<div class="owl-carousel" id="promo"> 
    <div><img src="/images/slide1.jpg" alt=""></div> 
    <div><img src="/images/slide2.jpg" alt=""></div> 
    <div><img src="/images/slide3.jpg" alt=""></div> 
</div> 

Kann nicht damit es funktioniert. Bei jetzt sieht es aus, dass wie: https://yadi.sk/i/5Y8RQ5ts3N4iny

ich mag es zu suchen: https://yadi.sk/i/PjzaXEx93N4iuV

aber ohne die Bildverzerrung.

Answer 1

Setzen Sie das Bild in einen Container div. Wenden Sie die Transformation skew auf den Container div an, sagen wir transform: skew(20deg). Dann ist das Bild verzerrt, genau wie du sagst. Aber wenn Sie skew(-20deg) auf das Bild im Container anwenden, sieht alles normal aus. Fügen Sie dem Container einige zusätzliche Eigenschaften hinzu, und Sie können das gewünschte Ergebnis erzielen.

Beispiel: https://codepen.io/anon/pen/mBPxjY