如何通过3D CSS转换实现“深度”

Question

我正在尝试使用CSS创建一个“透视模型”。关于如何在Photoshop中使用3D图层实现此功能的教程很多，但我想使用CSS来实现。这是我要实现的示例：

这是代码（使用原始图像https://i.imgur.com/foDEYpB.png）：

#perspective {
  width: 400px;
  height: 500px;
  position: absolute;
  background-image: url("https://i.imgur.com/foDEYpB.png");
  background-repeat: no-repeat;
  background-size: cover;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -250px;
  transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg);
  box-shadow: -15px 15px 20px rgba(0, 0, 0, 0.5);
}

<div id='perspective'></div>

我已经很接近了，但是不确定如何提高图像看起来的“深度”或“高度”。所说的“深度”的放大版本，其中图像在侧面重复出现：

PS：如果有人知道我所说的“深度”的正确名称，我很想知道！

Answer 1

尝试添加三种类型的图像来制作 3D 效果。transform对图像使用带有旋转的属性以获得所需的结果。

答案参考这里。

.perspective {
    position: relative;
    width: 400px;
    height: 500px;
    transform-style: preserve-3d;
    transition: all 500ms ease-in;
    transform: rotateY(20deg) rotateX(60deg) rotateZ(-10deg);
    transform: rotateY(15deg) rotateX(50deg) rotateZ(-15deg);
    box-shadow: -40px 80px 80px -10px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    margin-right: 30px;
    display: inline-block;
    margin-left: 30%;
}

.perspective img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 400px;
    height: 500px;
    transform: translateZ(16px);
}

.bottom,
.left {
    position: absolute;
    width: 400px;
    height: 500px;
    display: block;
    transition: all 1s linear;
    overflow: hidden;
    border-radius: 3px;
    transform: translateZ(16px);
}

.left {
    transform: rotateY(270deg) translateX(-1px);
    transform-origin: center left;
    width: 18px;
}

.bottom {
    transform: rotateX(90deg) translateY(15px) translateZ(-480px);
    transform-origin: bottom center;
    height: 18px;
}

.bottom img {
    transform: rotateX(180deg);
    width: 100%;
    height: 500px;
    left: 0px;
}

<div class="perspective">
    <img src="https://i.imgur.com/foDEYpB.png">
    <div class="bottom"><img src="https://i.imgur.com/foDEYpB.png"></div>
    <div class="left"><img src="https://i.imgur.com/foDEYpB.png"></div>
</div>

Answer 2

这是一个使用多个背景来模拟这种效果的hacky 想法。诀窍是添加 2 个半透明渐变来创建阴影效果，然后添加 2 个其他渐变来切割角的一小部分以获得 3D 形状。

对于所有图像，结果可能并不完美：

.wrapper {
  display:inline-block;
  perspective:1000px;
}
.box {
  margin: 50px;
  width:200px;
  height:200px;
  transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg);
  background:
  linear-gradient(to bottom right,transparent 49%,#fff 52%) bottom right/14px 10px,
  linear-gradient(to top left,transparent 49%,#fff 52%) top left /10px 14px,
  
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) 0 0px/10px 100%,   
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) 100% 100%/calc(100% - 10px) 10px,   
  url(https://picsum.photos/id/1061/1000/800) center/cover;
  background-repeat:no-repeat;
}

<div class="wrapper" >
<div class="box" >
</div>
</div>

使用您的图像，您可以拥有如下所示的特定渐变：

body {
  background:#ccc;
  
}
.wrapper {
  display:inline-block;
  perspective:1000px;
}
.box {
  margin: 50px;
  width:200px;
  height:250px;
  transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg);
  background:
  linear-gradient(to bottom right,transparent 49%,#ccc 52%) bottom right/16px 10px,
  linear-gradient(to top left,transparent 49%,#ccc 52%) top left /10px 12px,
  
  linear-gradient(#efefef,#efefef) 100% 100%/calc(100% - 10px) 10px, 
  linear-gradient(-226deg,#222428 13px,#ff4946 13px,#ff4946 77px,#592D30 77px,#592D30 100px,#222428 100px,#222428 108px,#efefef 108px,#efefef 161px) 0 0px/10px 100%,      
  
  url(https://i.imgur.com/foDEYpB.png) center/cover;
  background-repeat:no-repeat;
}

<div class="wrapper">
  <div class="box">
  </div>
</div>