将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 值