如图：如何做出书架的效果，刚入行，这个效果想了半天，没有思路，求大神指点~~~

页面如何呈现书架效果?

PiLee

1.5k1110

发布于
2016-05-30

更新于
2016-05-31

✓ 已被采纳

既然想要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