将 box-shadow 添加到转换后的 div答案

【问题标题】：Add box-shadow to transformed div将 box-shadow 添加到转换后的 div
【发布时间】：2017-10-12 11:11:02
【问题描述】：

我正在制作一本仅使用 CSS 的 3D 外观书籍。我在最后一步，即添加box-shadow 到它。

如何添加box-shadow:10px 10px 30px rgba(0,0,0,0.3)？我想我需要调整 div 设置。

请参阅jsFiddle 了解视觉效果。

.book-image-wrap {
  margin: 25px auto;
  height: 346px;
  width: 230px;
  position: relative;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  perspective: 1200px;
}

.book-image {
  background: #000;
  height: 346px;
  width: 230px;
  position: absolute;
  left: 16px;
  top: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-border-radius: 0 7px 7px 0;
  -moz-border-radius: 0 7px 7px 0;
  border-radius: 0 7px 7px 0;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  perspective: 1200px;
  -webkit-transform: rotateY(30deg);
  -moz-transform: rotateY(30deg);
  transform: rotateY(30deg);
}

.book-image-cover {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 230px;
  max-width: 230px;
  max-height: 346px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  transform-origin: 0;
}

.book-image-cover:after {
  background: rgba(0, 0, 0, 0.06);
  box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  width: 3px;
}

.book-image-spine {
  background: darkred;
  width: 40px;
  height: 344px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  transform-origin: 0;
}

<div class="book-image-wrap" style="width:250px;height:400px;">
  <div class="book-image" style="width:250px;height:400px;">
    <div class="book-image-cover" style="background:url(https://d202m5krfqbpi5.cloudfront.net/books/1347457482l/13248057.jpg);max-width:250px;max-height:400px;width:250px;"></div>
    <div class="book-image-spine" style="width:40px;height:400px;"></div>
  </div>
</div>

【问题讨论】：

我真的喜欢它的渲染方式，干得好！ +1 我的猜测是以盒子阴影可以工作的方式包装 div。
可以肯定的是，只需将其添加到 book-image 就可以获得足够好的结果
@LinkinTED box-shadow 需要在左侧，而不是右侧。
@GuillaumeRoche-Bayard 但现在阴影覆盖了书脊。这是我最初的问题！
@ovokuro 快到了。有没有办法不让阴影与脊椎重叠？我制作了脊椎颜色white，您可以清楚地看到它是如何重叠的：jsfiddle.net/uuoq5dhs/1

标签： html css

【解决方案1】：

您可以将filter:drop-shadow(-10px 10px 10px rgba(0,0,0,0.8)); 添加到您的.book-image-wrap

请看这里：https://jsfiddle.net/tpw85kLb/3/

并根据需要调整 px 值

【讨论】：

谢谢，但这似乎弄乱了设置。尝试添加和删除阴影，你会明白我的意思。 注意： 请使用 Firefox 进行测试。我在 Chrome 中看起来不错！
哦，好吧，我最初在 chrome 中检查过...打算再尝试一下
好吧，我确实找到了问题，但还没有真正的解决方案：过滤器似乎覆盖了 preserve-3d，请参见此处：stackoverflow.com/questions/34555106/…

【解决方案2】：

正如@Guillaume Roche-Bayard 建议的那样，只需将 box-shadow 属性添加到 .book-image。此外，我还向 .book-image-cover 添加了相同的属性。

.book-image-wrap {
  margin: 25px auto;
  height: 346px;
  width: 230px;
  position: relative;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  perspective: 1200px;
}

.book-image {
  background: #000;
  height: 346px;
  width: 230px;
  position: absolute;
  left: 16px;
  top: 0;
  box-shadow:-25px 10px 30px rgba(0,0,0,0.3);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-border-radius: 0 7px 7px 0;
  -moz-border-radius: 0 7px 7px 0;
  border-radius: 0 7px 7px 0;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  perspective: 1200px;
  -webkit-transform: rotateY(30deg);
  -moz-transform: rotateY(30deg);
  transform: rotateY(30deg);
}

.book-image-cover {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  box-shadow:-25px 10px 30px rgba(0,0,0,0.3);
  width: 230px;
  max-width: 230px;
  max-height: 346px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  transform-origin: 0;
}

.book-image-cover:after {
  background: rgba(0, 0, 0, 0.06);
  box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  width: 3px;
}

.book-image-spine {
  background: darkred;
  width: 40px;
  height: 344px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  transform-origin: 0;
}

<div class="book-image-wrap" style="width:250px;height:400px;">
  <div class="book-image" style="width:250px;height:400px;">
    <div class="book-image-cover" style="background:url(https://d202m5krfqbpi5.cloudfront.net/books/1347457482l/13248057.jpg);max-width:250px;max-height:400px;width:250px;"></div>
    <div class="book-image-spine" style="width:40px;height:400px;"></div>
  </div>
</div>

【讨论】：

这是不正确的。正如我在 cmets 中向 Guillaume 指出的那样，我希望阴影落在左侧一侧，而不是右侧。
希望现在有帮助。改变了一点，从 10px 到 -25px