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

我正在尝试仅使用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>

最佳答案

您可以在您的filter:drop-shadow(-10px 10px 10px rgba(0,0,0,0.8));中添加.book-image-wrap
看到这里:https://jsfiddle.net/tpw85kLb/3/

并根据需要调整px值

关于html - 将box-shadow添加到转换后的div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46708150/