[css] 用css3画出一个立体魔方

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>立方体</title><style>.box{width: 300px;height: 300px;margin: 100px auto;perspective: 500px;}.con{position:relative;width:300px;height:300px;transform-style:preserve-3d;transform-origin:50% 50% -150px;animation:rotate 4s infinite;}.con .side{position:absolute;width:300px;height:300px;font-size:44px;line-height: 300px;text-align: center;}.con .before{background-color: rgba(0,0,0,0.4);}.con .left{background-color: rgba(255,0,0,0.4);left:-300px;top:0;transform:rotateY(-90deg);transform-origin:right;}.con .right{background-color: rgba(255,255,0,0.4);left:300px;top:0;transform:rotateY(90deg);transform-origin:left;}.con .top{background-color: rgba(0,255,0,0.4);left:0;top:-300px;transform:rotateX(90deg);transform-origin:bottom;}.con .bottom{background-color: rgba(0,0,255,0.4);left:0;top:300px;transform:rotateX(-90deg);transform-origin:top;}.con .back{background-color: rgba(200,122,0,0.4);transform:translateZ(-300px);}@keyframes rotate{0%{transform:rotateX(0) rotateY(0);}50%{transform:rotateX(0) rotateY(360deg);}100%{transform:rotateX(360deg) rotateY(360deg);}}</style>
</head>
<body>
<div class="box"><div class="con"><div class="side before">前</div><div class="side back">后</div><div class="side top">上</div><div class="side bottom">下</div><div class="side left">左</div><div class="side right">右</div></div>
</div>
</body>
</html>