Question

这是我与之合作的图片：http://imgur.com/a/MBM6K - 我为质量道歉。目前我无法分享更好的一个。

有关图像的一些说明：黑色边缘是平板电脑的边缘。里面是一个网页的图像。

正如你所看到的，白色部分的形状有点像梯形。我正在尝试创建一个滑块，我将白色图像（网站）滑入平板电脑屏幕。问题是，网站的图像是一个矩形而不是一个梯形。边缘是透明的，因此它看起来像一个梯形。

这很好，直到我们滑到下一张图片。然后我们看到图像之间有一些透明的空间。

我尝试过：

使用translateX在图像之间滑动。随着图像回来回来，我们看到图像之间的透明空间。不好。
使用绝对位置，并将下一个图像滑过当前图像。这也不好，因为白色图像的透明部分停留在平板电脑的边缘上，您可以看到下一个图像的不透明部分越过边缘。

我有一个版本在我使用clip-path：polygon的地方工作但是我需要IE支持，所以它不会起作用。

有什么想法吗？

Answer 1

哦，确定，请使用悬停

＆＃13;

.container {
  perspective: 500px;
  }
.container div {
  background-color: blue;
  width: 70vw;
  height: 50vh;
  min-height: 200px;
  margin: 0 auto;
  transform: rotatex(-10deg);
  transition: .5s;
  }
.container div:hover {
  transform: rotatex(-40deg);

＆＃13;

<div class="container">
  <div></div>
</div>

＆＃13;

带有梯形图像的图像滑块

1 个答案: