CSS3 动态魔方的展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            perspective: 500px;perspective-origin: 50% 50%;
        }
        .cube{height:200px; 200px;margin: 50px auto;text-align: center;line-height: 200px;font-size: 50px;font-weight: bold;
             transform-style: preserve-3d;  }
        .cube div{ height: 200px; 200px;border: 1px solid black ;}
        .font{position: absolute;background: rgba(38, 248, 126, 0.5);}
        .back{position: absolute;background: rgba(203, 248, 180, 0.5);}
        .left{position: absolute;background: rgba(248, 141, 29, 0.5); }
        .right{position: absolute;background: rgba(128, 60, 248, 0.5); }
        .top{  position: absolute; background: rgba(50, 149, 248, 0.5);}
        .bottom{position: absolute;background: rgba(248, 10, 3, 0.5);}
        .font{ transform:translate3d(0,0,100px);}
        .back{transform: translate3d(0,0,-100px) rotateX( -180deg ) }
        .left{transform: translate3d(-100px,0,0) rotateY(-90deg);}
        .right{transform:translate3d(100px,0,0) rotateY(90deg) ;}
        .top{ transform:translate3d(0,100px,0) rotateX(-90deg) }
        .bottom{transform:translate3d(0,-100px,0) rotateX(90deg)}
        .cube{animation-name:bonce;animation-duration: 4s;animation-iteration-count: 10;animation-direction: alternate; }
        @keyframes bonce{
            0%{transform: rotate3d(1,0,0,0deg)}
            33%{transform: rotate3d(1,0,0,180deg)}
            66%{transform: rotate3d(1,0,0,180deg)}
            100%{transform: rotate3d(1,0,0,360deg)}
        }
    </style>
</head>
<body>
<div class="container">
    <div class="cube">
        <div class="font">font</div>
        <div class="back">back</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
    </div>
</div>
</body>
container这个div是最后加的，将透视加到cube上时，旋转过程正会有变形。