具体步骤如下：
一、立方体结构中，使用一个wrapper div来包裹立方体。在里面使用6个div来制作立方体的6个面。
二、立方体的每一个面都有它自己的元素。我们稍后会使用CSS来将立方体的6个面放置到正确的位置上。
三、在立方体的CSS样式中，首先要关注的是立方体的wrapper div。为了制作3D效果，我们需要为它提供一个 CSS perspective。
四、CSS perspective属性是一个比较复杂的CSS3属性。最好的理解它的方法是看完文档后，自己动手修改一下DEMO中的perspective属性来看看它的变化。
下面需要给包含立方体6个面的立方体的容器.cube提供样式：
1、.cube {
position: relative
width: 200px
transform-style: preserve-3d
2、给立方体容器200像素的宽度，并设置为相对定位，这样在它里面的立方体的6个面可以设置为绝对定位。
3、preserve-3d属性确保所有6个面都处于3D立体状态。
4、在为6个面设置它们的位置之前，先给它们一些通用的样式：
.cube div {
position: absolute
width: 200px
height: 200px
}
5、在进过上面对立方体6个面的一系列设置之后，现在我们可以为6个面制作变形效果，以使它们组装为一个立方体。
6、rotateY的值可以旋转立方体的各个面，使上面的文字处于正确的位置上。
7、而 translateZ 的值使元素在指定容器中向前或向后移动。translateY的值看起来有些混乱，但是请记住，它的作用是通过透明的面板来使指定的面升高或降低来制作3D效果。
8、每一个面都有自己的translations值来使它们处于适当的位置上。你可以自己修改一下这些值来看看效果。
效果图成型如下，颜色，其他的高度可以根据自己的需要进行调节，大概布局已完成，具体内容自行填充，CSS和JS部分自行分离
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0padding: 0
}
html,body{
width: 100%
height: 100%
}
#logo{
width: 100%
height: 20%
background: #40E0D0
}
#list{
width: 100%
/*height: 50px*/
}
ul>li{
width: 25%
/*height: 50px*/
float: left
list-style: none
text-align: center
line-height: 50px
}
select{
width: 100%
height: 50px
}
#content{
width: 100%
height: 70%
}
#left{
float: left
width: 80%
height: 100%
background: red
}
#right{
float: right
width: 20%
height: 100%
background: yellow
}
#right>a{
display: block
width: 100px
height: 50px
margin-top:50px
text-align: center
line-height: 50px
background: blueviolet
margin-left:30%
}
#text{
height: 40%
}
#image{
width: 100%
height: 60%
background-size:100% 100%
}
ul>li:nth-child(1)>select{background: aqua}
ul>li:nth-child(2)>select{background: greenyellow}
ul>li:nth-child(3){background: fuchsia}
ul>li:nth-child(4){background: yellowgreen}
</style>
</head>
<body>
<div id="logo">
logo，这个部分可以是一张图片或者，"canvas"
</div>
<div id="list">
<ul>
<li>
<select >
<option>子菜单1——1</option>
<option>子菜单1——2</option>
</select>
</li>
<li><select>
<option>子菜单2——1</option>
<option>子菜单2——2</option>
</select></li>
<li>
<a>菜单3 </a>
</li>
<li><a>菜单3</a></li>
</ul>
</div>
<div id="content">
<div id="left">
<div id="text">
立体文字还没有研究
</div>
<div id="image">
背景轮播图片,每7秒一张，首次加载有点慢。你也可以跟换成本地图片。
</div>
</div>
<div id="right">
<a>右一</a>
<a>右二</a>
</div>
</div>
<script type="text/javascript">
var backimage=document.getElementById("image")
var arr=["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529266314739&di=74c33905bd73f947c301bd75b59c3d66&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013a4456f2626f32f875a944208731.jpg%402o.jpg","https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2791035250,4080821670&fm=27&gp=0.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529266314735&di=935f676360cccf324acfff0c2f7be96f&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F20%2F183224gyeqynrs9irs0b0r.gif","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529265955947&di=0c66ddc401aa728c1698f189ca1ce16f&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201509%2F23%2F140610ebbookekbr1qbte1.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529265955946&di=d50620ba96dc70d26a0b356c19cc7fc6&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F570f4a85c88e6.jpg", ]
var i=-1
function backimg(){
i++
if( i>arr.length-1){
i=0
}
backimage.style.backgroundImage="url("+arr[i]+")"
setTimeout(backimg,7000)
}
backimg()
</script>
</body>
</html>
