Jquery 在侧面倾斜图像而不失真

我想在owl旋转木马中使用css扭曲图像

SCSS：

HTML:

不能让它工作。现在看来：

我希望它看起来：

---

但是没有图像失真。

将图像放在容器div中。对容器div应用

skew

变换，例如

transform:skew（20度）

。然后图像被扭曲了，就像你说的。但是如果将

skew（-20deg）

应用于容器内的图像，则看起来一切正常。将一些附加属性添加到容器中，可以获得所需的结果

---

示例：

您的意思是添加图像作为背景？无法使用普通图像？我想你可以让它工作。。。我不知道猫头鹰转盘是怎么工作的

.owl-item {
    > div {
        transform: skew(-20deg, 0);
        overflow: hidden;

        > img {
            transform: skew(20deg, 0);
        }
    }
}

<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>