Html 使用CSS为图像添加深度

我有一个图像，我用CSS旋转它，给它一个透视图。我想给它加一层厚度，使它看起来像一本书，像这样：

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

.thumb{
透视图：600px；
}
#掩护{
宽度：60%；
最大宽度：300px；
显示：块；
保证金：自动；
变换：旋转（45度）；
-网络工具包盒阴影：-40px 25px 55px 6px#85919d；
盒影：-40px 25px 55px 6px#85919d；
变换样式：保留-3d；
}

签出此链接：

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

---

这几乎就是你想要的。检查代码笔代码段上的scss标记，这可能会有所帮助。您还可以查看编译后的css，在玩了一段时间后，我想到了这个。我确信还有其他方法可以实现同样的效果，在我的示例中，我使用边界来创建阴影角度。在FF上进行了测试，但似乎我们需要铬合金的最大高度

我在图像中添加了框阴影，因为有一个带有边框的“裂缝”，框阴影填充了它

.thumb{
变换：旋转（-33度）倾斜（20度）；
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.分隔器{
宽度：100%；
}
.左{
右边框：20px纯色灰色；
边框顶部：20px实心透明；
}
.底部{
高度：20px；
宽度：60%；
最大宽度：220px；
边框顶部：20px纯色灰色；
右边框：20px实心透明；
框大小：边框框；
}
#掩护{
宽度：60%；
最大宽度：200px；
最大高度：300px；
方框阴影：-19px 19px 0px 0灰色，-19px 19px 0px 0灰色；
}

afaik您不能仅使用css来实现这一点。您可能可以使用多个div/伪元素来实现，厚度部分将只是倾斜的div。我认为这是可行的，但需要一些时间来制定它看起来有点像你的预期目标。在这里找到：我想这就是你要找的：

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