带有梯形图像的图像滑块

Question

这是我正在使用的图片：http://imgur.com/a/MBM6K - 对于质量问题，我深表歉意。我目前无法分享更好的。

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

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

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

我尝试过的：

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

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

有什么想法吗？

Answer 1

哦，当然，使用悬停

.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);

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