既然想要CSS3实现,那我就做一下吧
都是运用CSS3 3D变换的知识,设置perspective,rotate3D,translateXY等属性就好了,需要花点时间慢慢调整
效果预览:
代码可以做参考下,按照自己的需求优化和修改
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(3