如何使用 CSS 重新创建 Disney Plus / Netflix 封面图片？

Question

我的网站上有一张背景图片。我想倾斜它，使它看起来像 Netflix / Disney Plus 上的封面照片（附在下面）。

尝试

我尝试将它添加到我的图像的 CSS 中，灵感来自这个问题：CSS transform like netflix cover image

transform: rotateY(-30deg) rotateX(40deg) perspective(800px) scale(1.6)

但它不会产生预期的结果。相反，它不正确地倾斜并且没有完全拉伸容器。

代码示例

这是我的例子：https://jsfiddle.net/gd3wL8nk/11/

截图

更新

我通过将 perspective: 2000px 添加到包含 div 并将其添加到内部 div 来使其工作：

transform: rotateY(-20deg) rotateX(20deg) scale(2) translateX(-10%)

我的最终 CSS（包括测量编辑等）如下所示：

.container {
  height: 90vh;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  perspective: 2000px;
  height: 900
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 110%;
  background-image: url('image-here');
  background-size: cover;
  transform: rotateY(-20deg) rotateX(20deg) scale(2);
  position: absolute;
  top: -10%;
  left: 0;
  minWidth: 800;
}

见小提琴：https://jsfiddle.net/fernandorojo/kr567zp8/4/

Answer 1

您可能正在寻找transform: skew();！

即

transform: skew(20deg) scale(1.6);

但它不适用于 X 和 Y 旋转。确保其全屏的一个好方法是将图像用作超大容器中的背景。对于任何子项（如表单，如果您将其嵌套在父 div 中），您将需要应用相反的倾斜以确保它不会出现倾斜。

如果您检查the asset Netflix uses，它已经在 Photoshop 中倾斜。