Add shadow box to convert div

Question

I am working on a three-dimensional book using only CSS. I am in the last step, which should add box-shadow to it.

How to add box-shadow:10px 10px 30px rgba(0,0,0,0.3) to it? I assume that I need to adjust the div setting.

See jsFiddle for visual effects.

 .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

you can add filter:drop-shadow(-10px 10px 10px rgba(0,0,0,0.8)); to your .book-image-wrap

see here: https://jsfiddle.net/tpw85kLb/3/

and adjust the px values ​​to suit your needs.

Answer 2

As @Guillaume Roche-Bayard suggested, just add the box-shadow property to the .book-image . In addition, I added the same property to .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>