如图：
如何做出书架的效果，刚入行，这个效果想了半天，没有思路，求大神指点~~~
我觉得可以用css3阴影去做，底部那个桌子用图片吧！
书架用背景图片，阴影部分可以用css写
既然想要CSS3实现，那我就做一下吧
都是运用CSS3 3D变换的知识，设置perspective,rotate3D,translateXY等属性就好了，需要花点时间慢慢调整
效果预览：
代码可以做参考下，按照自己的需求优化和修改
<style>
ul{
list-style:none;
}
.stage{
position:relative;
margin:100px;
}
.desk{
background:#eae1dc;
width:500px;
height:20px;
position:absolute;
bottom:-35px;
border-bottom:2px solid #f5ebe9;
z-index:-1;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.desk:after{
content: "";
background: #F2EDEA;
width: 574px;
position: absolute;
height: 65px;
-webkit-transform: perspective(300px) rotateX(50deg) translateX(-42px) translateY(-90px);
transform: perspective(300px) rotateX(50deg) translateX(-42px) translateY(-90px);
}
.desk-shadow{
position: absolute;
bottom: -100px;
z-index: -2;
background: none;
width: 510px;
height: 65px;
box-shadow: 0 56px 63px rgba(0,0,0,0.3);
-webkit-transform: perspective(300px) rotateX(33deg) translateX(3px) translateY(-90px);
transform: perspective(300px) rotateX(33deg) translateX(3px) translateY(-90px);
}
.books-list li{
position:relative;
display:inline-block;
margin-left:12px;
width:130px;
height:134px;
z-index:2;
overflow-y:hidden;
overflow-x:visible;
}
.books-list li img{
width:100px;
height:134px;
}
.books-list li:after{
content: "";
position: absolute;
overflow: hidden;
right: 28px;
bottom: 0px;
width: 25px;
height: 129px;
background: rgba(0,0,0,0.4);
box-shadow: 0 0 5px rgba(0,0,0,0.4);
-webkit-transform: perspective(300px) rotateX(29deg) rotateY(-61deg) rotateZ(-11deg) translateX(8px) translateY(8px);
transform: perspective(300px) rotateX(29deg) rotateY(-61deg) rotateZ(-11deg) translateX(8px) translateY(8px);
z-index: -1;
}
</style>
<body>
<div class="stage">
<ul class="books-list">
<li><img src="http://jjckb.xinhuanet.com/2016-05/20/135374404_14637120163591n.jpg"></li>
<li><img src="http://jjckb.xinhuanet.com/2016-05/20/135374404_14637120163591n.jpg"></li>
<li><img src="http://jjckb.xinhuanet.com/2016-05/20/135374404_14637120163591n.jpg"></li>
</ul>
<div class="desk"></div>
<div class="desk-shadow"></div>
</div>
</body>Demo:http://runjs.cn/code/cjmxmfyu
用图片吧或者搜索html5书架效果