在侧面倾斜图像而不失真答案

【问题标题】：Skew an image on the sides without distortion在侧面倾斜图像而不失真
【发布时间】：2017-09-20 07:04:46
【问题描述】：

我想在 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

但没有图像失真。

【问题讨论】：

标签： jquery css transform owl-carousel skew

【解决方案1】：

将图像放入容器 div 中。将skew 转换应用于容器 div，比如说transform: skew(20deg)。然后图像失真，就像你说的那样。但是如果你将skew(-20deg) 应用于容器内的图像，它看起来一切正常。给容器添加一些额外的属性，就可以达到想要的效果了。

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

【讨论】：

您的意思是添加图片作为背景？不适用于纯图像？
我猜你可以让它工作......我不知道猫头鹰旋转木马是如何工作的 tbh