왜곡없이 이미지 왜곡

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