Html 将长方体阴影添加到变换的div

我正在制作一本只使用CSS的3D书籍。我已经到了最后一步，那就是添加

box shadow

如何向其添加

box shadow:10px 10px 30px rgba（0,0,0,0.3）

？我想我需要调整div设置

有关视觉效果，请参见

。书籍图像包装{
保证金：25像素自动；
高度：346px；
宽度：230px；
位置：相对位置；
-webkit透视图：1200px；
-moz透视图：1200px；
透视图：1200像素；
}
.书籍形象{
背景：#000；
高度：346px；
宽度：230px；
位置：绝对位置；
左：16px；
排名：0；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
变换样式：保留-3d；
-webkit边界半径：0 7px 7px 0；
-moz边界半径：0 7px 7px 0；
边界半径：0 7px 7px 0；
-webkit透视图：1200px；
-moz透视图：1200px；
透视图：1200像素；
-webkit变换：旋转（30度）；
-莫兹变换：旋转（30度）；
变换：旋转（30度）；
}
.书籍图片封面{
位置：绝对位置；
左：0；
排名：0；
身高：100%；
宽度：230px；
最大宽度：230px；
最大高度：346px；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
背面可见性：隐藏；
-webkit边界半径：0 4px 4px 0；
-moz边界半径：0 4px 4px 0；
边界半径：0 4px 4px 0；
-webkit转换源：0；
-moz变换原点：0；
变换原点：0；
}
.书籍图片封面：之后{
背景：rgba（0,0,0,0.06）；
盒影：1px0 3pxRGBA（255,255,255,0.1）；
内容：''；
位置：绝对位置；
排名：0；
左：10px；
底部：0；
宽度：3倍；
}
.书脊{
背景：黑暗；
宽度：40px；
高度：344px；
位置：绝对位置；
排名：0；
左：0；
-webkit变换：旋转（90度）；
-莫兹变换：旋转（90度）；
变换：旋转（90度）；
-webkit转换源：0；
-moz变换原点：0；
变换原点：0；
}

---

您可以添加

过滤器：放置阴影（-10px 10px 10px rgba（0,0,0.8））到您的
。书籍图像包装

请看这里：

并根据您的需要调整px值
正如@Guillaume Roche Bayard建议的那样，只需将box shadow属性添加到.book image。此外，我还为.book图像封面添加了相同的属性


。书籍图像包装{
保证金：25像素自动；
高度：346px；
宽度：230px；
位置：相对位置；
-webkit透视图：1200px；
-moz透视图：1200px；
透视图：1200像素；
}
.书籍形象{
背景：#000；
高度：346px；
宽度：230px；
位置：绝对位置；
左：16px；
排名：0；
盒影：-25px 10px 30px rgba（0,0,0,0.3）；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
变换样式：保留-3d；
-webkit边界半径：0 7px 7px 0；
-moz边界半径：0 7px 7px 0；
边界半径：0 7px 7px 0；
-webkit透视图：1200px；
-moz透视图：1200px；
透视图：1200像素；
-webkit变换：旋转（30度）；
-莫兹变换：旋转（30度）；
变换：旋转（30度）；
}
.书籍图片封面{
位置：绝对位置；
左：0；
排名：0；
身高：100%；
盒影：-25px 10px 30px rgba（0,0,0,0.3）；
宽度：230px；
最大宽度：230px；
最大高度：346px；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
背面可见性：隐藏；
-webkit边界半径：0 4px 4px 0；
-moz边界半径：0 4px 4px 0；
边界半径：0 4px 4px 0；
-webkit转换源：0；
-moz变换原点：0；
变换原点：0；
}
.书籍图片封面：之后{
背景：rgba（0,0,0,0.06）；
盒影：1px0 3pxRGBA（255,255,255,0.1）；
内容：''；
位置：绝对位置；
排名：0；
左：10px；
底部：0；
宽度：3倍；
}
.书脊{
背景：黑暗；
宽度：40px；
高度：344px；
位置：绝对位置；
排名：0；
左：0；
-webkit变换：旋转（90度）；
-莫兹变换：旋转（90度）；
变换：旋转（90度）；
-webkit转换源：0；
-moz变换原点：0；
变换原点：0；
}

我真的很喜欢它的渲染方式，干得好+我的猜测是以一种盒子阴影可以工作的方式来包装div。可以肯定的是，只需将其添加到书本图像中，就可以获得足够好的效果result@LinkinTED“盒子的阴影应该在左边，而不是右边。”吉尔劳默罗什·巴亚德说，但现在阴影已经盖住了书脊。这是我的第一个问题@奥沃库罗快到了。难道没有办法不让阴影与脊椎重叠吗？我将脊椎颜色设置为白色，您可以清楚地看到它是如何重叠的：谢谢，但这似乎会把设置搞砸。尝试添加和删除阴影，你就会明白我的意思。注意：请使用Firefox进行测试。我穿铬合金衣服看起来不错！哦，好吧，我刚登记的时候。。。再试试看，我确实发现了问题，但还没有真正的解决方案：似乎过滤器覆盖了preserve-3d，请参见此处：这是错误的。正如我在评论中对纪尧姆所说的，我希望阴影落在左边，而不是右边。希望这对现在有所帮助。改变了一点，从10px到-25px