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

Question

我正致力于仅使用 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>

Answer 1

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

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

并根据需要调整 px 值