使用CSS为图像添加深度

Question

我有一个图像，我用CSS旋转它给它一个透视图。我想为它添加一个厚度，使它看起来像一本书，如下：

到目前为止我使用的代码/结果如下：

.thumb {
  perspective: 600px;
}

#cover {
  width: 60%;
  max-width: 300px;
  display: block;
  margin: auto;
  transform: rotateY( 45deg);
  -webkit-box-shadow: -40px 25px 55px 6px #85919d;
  box-shadow: -40px 25px 55px 6px #85919d;
  transform-style: preserve-3d;
}

<div class="thumb">
  <img id="cover" src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png">
</div>

Answer 1

好好玩了一会儿后我想出了这个。我确信还有其他方法可以实现相同的功能，在我的例子中，我使用边框来创建阴影角度。在FF上测试但看起来我们需要chrome中的max-height

我在图片中添加了框阴影，因为边框有一个“裂缝”，而且框阴影填满了它

.thumb {
  transform: rotate( -33deg) skew(20deg);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.divider {
  width: 100%;
}

.left {
  border-right: 20px solid grey;
  border-top: 20px solid transparent;
}

.bottom {
  height: 20px;
  width: 60%;
  max-width: 220px;
  border-top: 20px solid grey;
  border-right: 20px solid transparent;
  box-sizing: border-box;
}

#cover {
  width: 60%;
  max-width: 200px;
  max-height: 300px;
  box-shadow: -19px 19px 0px 0 grey, -19px 19px 0px 0 grey;
}

<div class="thumb">
  <div class="left">

  </div>
  <img id="cover" src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png">
  <div class="divider">

  </div>
  <div class="bottom">

  </div>
</div>

Answer 2

结帐此链接：https://codepen.io/jackoliver/embed/JKqAYp/?height=600&theme-id=0&default-tab=result&embed-version=2#result-box

transform: scale(.8) rotateX(45deg) rotateZ(45deg);

查找包含该代码的行，我认为是第24行

这几乎就像你想要的那样。检查它可能有用的codepen代码段上的scss标记。您还可以查看已编译的css