http://www.dadaqianduan.cn/#/%E5%89%8D%E7%AB%AF%E4%BA%A4%E6%B5%81/2-html5+css3/5-%E7%AB%8B%E6%96%B9%E4%BD%93
代码：
<!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 > <div > <div >前</div> <div >后</div> <div >上</div> <div >下</div> <div >左</div> <div >右</div> </div></div></body></html>
