Incliner une image sur les côtés sans distorsion

Question

Je veux incliner l'image en utilisant css dans owl-carrousel.

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> 

Ne peut pas le faire fonctionner. A maintenant il ressemble à ça: https://yadi.sk/i/5Y8RQ5ts3N4iny

Je veux que ce soit la recherche: https://yadi.sk/i/PjzaXEx93N4iuV

mais sans la distorsion de l'image.

Answer 1

Placez l'image dans un conteneur div. Appliquez la transformation skew au conteneur div, disons transform: skew(20deg). Ensuite, l'image est déformée, comme vous le dites. Mais si vous appliquez skew(-20deg) à l'image à l'intérieur du conteneur, il semble tout à fait normal. Ajoutez des propriétés supplémentaires au conteneur et vous pouvez obtenir le résultat souhaité.

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