侧面倾斜图像而不会失真

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

侧面倾斜图像而不会失真

Skew an image on the sides without distortion

css

jquery

transform

skew

owl-carousel