歪みのない画像を歪ませる

Question

owl-carouselでCSSを使用して画像を歪めたい。

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> 

はそれを動作させることはできません。今ではそのように見える時：https://yadi.sk/i/5Y8RQ5ts3N4iny

私はそれを見ていることにしたい。https://yadi.sk/i/PjzaXEx93N4iuV

が、画像の歪みなし。

Answer 1

画像をコンテナdivに入れます。コンテナdivにskew変換を適用します（transform: skew(20deg)）。あなたが言うように、画像はひずんでしまいます。しかし、コンテナ内の画像にskew(-20deg)を適用すると、すべて正常に見えます。コンテナにいくつかの追加プロパティを追加すると、目的の結果が得られます。

例：https://codepen.io/anon/pen/mBPxjY