jquery - 侧面倾斜图像而不会失真

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 中。将 skew 转换应用到容器 div，比方说 transform: skew(20deg)。然后图像失真，就像你说的那样。但是如果你对容器内的图像应用skew(-20deg)，它看起来一切正常。向容器添加一些额外的属性，您可以达到预期的结果。

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