<!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上时，旋转过程正会有变形。