我正在使用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;
}