html - 如何将 div 转换为倾斜视角？

Question

我正在尝试将我的 div 转换为绿色框。

我想获得 3D 变换，而不是蒙版:

我找到了 this generator 的方法但是 css 代码在我的 fiddle 上不起作用:

/*transform css3*/ 
#screen { 
    transform: scale(1.0) scaleZ(1.0) rotateX(-16deg);
    transform-origin: 0% 0%;
    perspective: 450;
    perspective-origin: 100% 50%;
}

body {
    height:100%;
    padding:0;
    margin:0;
}

#mask {
    background:url(/image/cBK0O.png) no-repeat;
    background-size:350px;
    height:200px;
    position:relative;
}

#screen:hover {
    background:url(https://www.actugaming.net/wp-content/uploads/2018/06/Assassins-Creed-Odyssey_Leak_06-10-18_015-1.jpg);
    background-size:100%;
}

#screen {
    position:absolute;
    bottom:38px;
    background:red;
    opacity:0.6;
}
   
#screen { 
    left:70px;
    width:240px;
    height:calc(240px * 9 / 16); /*keep 16/9 !*/
}

/*transform css3*/ 
#screen { 
    transform: scale(1.0) scaleZ(1.0) rotateX(-16deg);
    transform-origin: 0% 0%;
    perspective: 450;
    perspective-origin: 100% 50%;
}

<div id="mask">
<div id="screen"></div>
</div>

Answer 1

如果你想要那个形状，你可以使用 clip-path而不是使用 transform .这使您可以对获得的形状进行大量控制。这是一个可以帮助您的好工具: https://bennettfeely.com/clippy/

使用 transform ，您可以倾斜图像以在背景/div 内容上实现 3d 效果。

#screen:hover {
  background: url(https://www.actugaming.net/wp-content/uploads/2018/06/Assassins-Creed-Odyssey_Leak_06-10-18_015-1.jpg);
  background-size: 100%;
}

#screen {
  position: absolute;
  background: red;
  opacity: 0.6;
  left: 70px;
  width: 240px;
  height: calc(240px * 9 / 16);
  /*keep 16/9 !*/
  
  transform-origin: bottom right;
    -ms-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
    transform: skew(20deg, 0deg);
}

<div id="screen"></div>