<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*全局样式*/
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
html,body{
height: 100%;
}
.box{
width: 200px;
height: 200px;
position: absolute;/*把正方体定位在页面中心*/
top: 0;bottom: 0;
left: 0;right: 0;
margin: auto;
transform-style: preserve-3d; /*设置3D空间*/
transform: rotateX(-15deg) rotateY(-15deg);/*旋转角度，便于观察*/
}
/*每个li都是正方体的一面，通过定位重叠在一起*/
.box li{
width: 200px;
height: 200px;
position: absolute;
top:0;left:0;
}
.box li:nth-child(1){
background: rgba(255,0,0,.5);
}
/*以顶部中心点为原点，沿X轴旋转-90°，得到正方体上面*/
.box li:nth-child(2){
background: rgba(0,255,0,.5);
transform-origin: top center;
transform: rotateX(-90deg);
}
/*以底部中心点为原点，沿X轴旋转90°，得到正方体底面*/
.box li:nth-child(3){
background: rgba(0,0,255,.5);
transform-origin: bottom center;
transform: rotateX(90deg);
}
/*以左侧中心点为原点，沿Y轴旋转90°，得到正方体左面*/
.box li:nth-child(4){
background: rgba(255,255,0,.5);
transform-origin: center left;
transform: rotateY(90deg);
}
/*以顶部中心点为原点，沿Y轴旋转-90°，得到正方体右面*/
.box li:nth-child(5){
background: rgba(255,0,255,.5);
transform-origin: center right;
transform: rotateY(-90deg);
}
/*向后平移200px，得到正方体背面*/
.box li:nth-child(6){
background: rgba(0,255,255,.5);
transform:translateZ(-200px)
}
/*注：这种方法得到的正方体，除正面以外，其余5个面都是以li的背面朝向外面，如正方体表面需设置样式，可通过互换上下、左右两个面的位置和旋转背面解决。*/
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>