HTML+CSS怎么做3D正方体

示例如下：

HTML代码：

<div class="first">
	<div class="wrap">
		<div class="font">div>
		<div class="left">div>
		<div class="right">div>
		<div class="top">div>
		<div class="back">div>
		<div class="bottom">div>
	div>
div>

CSS代码如下：

	html{
     
         	background: radial-gradient(ellipse at center,green 20%, blue 100%);
          	height: 0.1%;
			}
			
	.first{
     
			-webkit-perspective:300px;
			perspective: 300px;
			width: 70px;
			height: 70px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -35px;
			margin-top:-35px;	
			}
			
	.wrap{
     
			position: absolute;
			height: 100px;
			width: 100px;
			transform-style:preserve-3d ;
			-webkit-transform-style: preserve-3d;
			-webkit-transform: rotateX(-30deg) rotateY(-30deg);
			-webkit-animation: 5s mov linear infinite ;
			}
			
			
	.wrap > div{
     
			background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
			background-color: rgba(200,150,160,0.3);
			height:100%;
			width: 100%;
			border: 1px solid blueviolet;
			-webkit-box-shadow: 0 0 10px rgba(0, 128, 0, 0.4);
			box-shadow: 0 0 10px rgba(0, 128, 0, 0.4);
			position: absolute;
			}
			
	.font{
     
			-webkit-transform: translateZ(50px);
			}
			
	.back{
     
	        -webkit-transform: rotateX(180deg) translateZ(50px);
	        }
	 
	.left{
     
	        -webkit-transform: rotateY(-90deg) translateZ(50px);
	        }
	 
	.right{
     
	        -webkit-transform: rotateY(90deg) translateZ(50px);
	        }
	 
	.top{
     
	        -webkit-transform: rotateX(90deg) translateZ(50px);
	        }
	 
	.bottom{
     
	        -webkit-transform: rotateX(-90deg) translateZ(50px);
	        }
			
	@keyframes mov{
     
			from{
     -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(0em);}
			to{
     -webkit-transform: rotateX(360deg) rotateY(360deg) translateZ(0em);}
			}