html div box,html – 为转换后的div添加box-shadow

我正在使用CSS制作3D看书.我正处于最后一步,即为它添加盒子阴影.

如何添加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;

}