歪斜两侧图像不失真

我想用猫头鹰旋转木马中的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

但没有图像失真。

来源

2017-09-20 Alexander Kim

将图像放入容器div中。将skew转换应用于容器div，可以说transform: skew(20deg)。然后，图像就像你说的那样变形了。但是，如果将skew(-20deg)应用于容器内部的图像，它看起来一切正常。向容器添加一些附加属性，您可以实现所需的结果。

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

来源

2017-09-20 07:32:07

您的意思是添加图像作为背景吗？无法使用纯色图像？ –

它肯定会与一个普通的图像 –

工作，但它会与猫头鹰旋转木马？ –

歪斜两侧图像不失真

回答

相关问题