偏向侧面的图像而不会失真

Question

我想在猫头鹰中使用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中。将skew转换应用于容器Div，可以说transform: skew(20deg)。然后，就像您说的那样，图像被扭曲了。但是，如果将skew(-20deg)应用于容器内部的图像，则看起来都正常。在容器中添加一些其他属性，您可以达到所需的结果。

示例：https：//codepen.io/anon/pen/mbpxjy