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

在没有扭曲的情况下在侧面倾斜图像

1 个答案: