注意：3D转换中，旋转前后的X Y Z轴方向就会改变。但只要人对着某个平面位置随着一起旋转时，其X Y Z位置相对人时都不会改变。
思路：把6个大小形同的盒子放在一起，然后进行旋转或平移，得到立方体。
难点：旋转时的参考标准怎么解决。
解决方法：对某个立方体的平面进行旋转时，人和该平面一起旋转，相对于人来说，其对面的X Y Z轴位置一直没变。
<!DOCTYPE html>
<html>
<head>
<title>3D立方体</title>
<style type="text/css">
*{margin:0;padding:0;}
body{
background:grey;
}
.box{
width:500px;
height:300px;
/*border:1px solid red;*/
margin:300px auto;
position:relative;
/*人眼位置也可以不写，认为在无限远的地方*/
/*perspective:800px;
perspective-origin:center center;*/
/*设置模式为3d模式*/
transform-style:preserve-3d;
/*设置2次角度的旋转，前后的参考点发生变化，第一次平面座标系的Y轴，第二次是转动后的X轴，不是原平面座标系的X轴，同时注意左手定则。*/
transform:rotateY(30deg) rotateX(-15deg);
}
.box div{
width:300px;
height:300px;
border:1px solid blue;
position:absolute;
top:0;
left:0;
color:white;
font-size:40px;
transform-style:preserve-3d;
text-align:center;
line-height:300px;
}
.box div:nth-child(2){
/*一个平面在中心位置按照Y轴,根据左手定则(大拇指向下为Y轴,四指指向为转动方向为正,反之为负.),先逆时针转180度,后严Z轴平移300px*/
transform:rotateY(180deg) translateZ(300px);
}
.box div:nth-child(4){
/*实测发现，不管是按照原点旋转，还是按指定位置旋转，旋转后的参考位置及方向就改变，*/
/*解决3维空间旋转后辨别X Y Z轴方向,可把当前平面的X轴为右手边,Y轴向下,旋转时,人也跟着旋转,则该人面对该平面时的原3维X Y Z轴方向不变/*/
transform:rotateY(270deg) translateX(-150px) translateZ(150px);
}
.box div:nth-child(3){
transform-origin:right center;
transform:rotateY(90deg) translateX(300px);
}
.box div:nth-child(6){
transform:rotateX(-90deg) translateZ(150px) translateY(150px);
}
.box div:nth-child(5){
transform:rotateX(90deg) translateZ(150px) translateY(-150px);
}
</style>
</head>
<body>
<div class='box'>
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c3">3</div>
<div class="c4">4</div>
<div class="c5">5</div>
<div class="c6">6</div>
</div>
</body>
</html>
效果如下：
