一开始盒子状态：
过渡过程：
最终形式： 大盒子旋转180deg，小盒子跟着大盒子旋转然后展开。
代码实现
body模块：
<body>
<div class="stage">
<div class="face1 face">前</div>
<div class="face2 face">后</div>
<div class="face3 face">左</div>
<div class="face4 face">右</div>
<div class="face5 face">上</div>
<div class="face6 face">下</div>
<div class="small1 small">前</div>
<div class="small2 small">后</div>
<div class="small3 small">左</div>
<div class="small4 small">右</div>
<div class="small5 small">上</div>
<div class="small6 small">下</div>
</div>
</body>CSS：
body{
perspective:800px;
}
.stage{
position:relative;
width:200px;
height:200px;
margin:400px auto;
box-shadow:0 0 15px #000 inset;
transform-style:preserve-3d;
transition:2s;
}
/*注意：因为position，所有的transform都是相对于父级元素来变化，因此把父级元素设置为舞台。*/
.stage:hover{
transform:rotateY(180deg);
}
.stage:hover .face5{
transform:translateZ(100px) translateY(-200px);
}
.stage:hover .small1{
transform:translateZ(100px) translateY(-300px);
}
.stage:hover .small2{
transform:rotateY(180deg) translateZ(100px) translateY(-300px);
}
.stage:hover .small3{
transform:rotateY(-90deg) translateZ(100px) translateY(-300px);
}
.stage:hover .small4{
transform:rotateY(90deg) translateZ(100px) translateY(-300px);
}
.stage:hover .small5{
transform:rotateX(90deg) translateZ(400px);
}
.stage:hover .small6{
transform:rotatex(-90deg) translateZ(-200px);
}
.face{
position:absolute;
width:200px;
height:200px;
box-shadow:0 0 20px #554ee9 inset;
transition:2s;
}
.small{
position:absolute;
right:50px;
bottom:0px;
width:100px;
height:100px;
box-shadow:0 0 5px #000 inset;
transition:2s;
}
.face1{
transform:translateZ(100px);
}
.face2{
transform:rotateY(180deg) translateZ(100px);
}
.face3{
transform:rotateY(-90deg) translateZ(100px);
}
.face4{
transform:rotateY(90deg) translateZ(100px);
}
.face5{
transform:rotateX(90deg) translateZ(100px);
}
.face6{
transform:rotatex(-90deg) translateZ(100px);
}
.small1{
transform:translateZ(50px);
}
.small2{
transform:rotateY(180deg) translateZ(50px);
}
.small3{
transform:rotateY(-90deg) translateZ(50px);
}
.small4{
transform:rotateY(90deg) translateZ(50px);
}
.small5{
transform:rotateX(90deg) translateZ(50px);
}
.small6{
transform:rotatex(-90deg) translateZ(50px);
}