css3 translate3d怎么制作立方体

CSS部分：

.per{width:100px;height:100px;transform-style:preserve-3d;perspective:1000px;margin:20% auto;
transform-origin:50% 50% -50px;animation:perc linear 10s;}
@keyframes perc{
0%{transform:rotateX(0) rotateY(0) rotateZ(0);}
10%{transform:rotateX(36deg) rotateY(36deg) rotateZ(36deg);}
20%{transform:rotateX(72deg) rotateY(72deg) rotateZ(72deg);}
30%{transform:rotateX(108deg) rotateY(108deg) rotateZ(108deg);}
40%{transform:rotateX(144deg) rotateY(144deg) rotateZ(144deg);}
50%{transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);}
60%{transform:rotateX(216deg) rotateY(216deg) rotateZ(216deg);}
70%{transform:rotateX(252deg) rotateY(252deg) rotateZ(252deg);}
80%{transform:rotateX(288deg) rotateY(288deg) rotateZ(288deg);}
90%{transform:rotateX(324deg) rotateY(324deg) rotateZ(324deg);}
100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
.per_nav{width:100px;height:100px;transform-style:preserve-3d;}
.per_nav div{width:100px;height:100px;position:absolute;text-align:center;}
.face{background:#f00;}/*红*/
.back{background:#0f0;transform:rotateX(180deg) translateZ(100px);}/*绿 后*/
.bottom{background:#00f;transform:rotateX(-90deg) translateZ(50px) translateY(50px);}/*蓝 下*/
.top{background:#000;transform:rotateX(90deg) translateZ(50px) translateY(-50px);}/*黑 上*/
.right{background:#EAF01A;transform:rotateY(90deg) translateZ(50px) translateX(50px);}/*黄 右*/
.left{background:#E910DB;transform:rotateY(-90deg) translateZ(50px) translateX(-50px);}/*紫 左*/
HTML部分：