1
条回答
写回答
写回答
-
IT从业既然想要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>2019-07-17 19:35:55赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
