html,body{
	width: 100%;
	height: 100%;
	margin:0;
	background: url(../img/2.png) no-repeat 0 0/cover;
}


.box{
	width: 65%;
	height: 80%;
	position: absolute;
	left: 28%;
	top: 19%;
 	transform: rotateY(45deg) rotateX(-20deg);
	transform-style: preserve-3d;
	
}
/*里面的盒子*/
.box> .in{
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
 	align-items: center;
	position: absolute;
	left: 50%;
	top: 50%;
	/*开启3d*/
	transform-style: preserve-3d;
	transform: translate(-50%,-50%) rotateY(45deg) rotateX(-20deg);
	/*调用动画*/
	animation: mofan 5s linear 0s infinite normal;	
	z-index: 100;

}
 
/*里面盒子六个面的共同值*/
.box> .in>div{
	width: 100px;
	height: 100px;
	position: absolute;
	opacity: 0.7;
	border: 1px solid white; 
}

/*里面盒子的六个面*/
/*前*/
.n1{
	background-color: #00ffff; 
	transform:translateZ(51px); 
}
/*后*/
.n2{ 
 	background-color: black;
	transform: translateZ(-51px);


}
/*左*/
.n3{
	background-color: black; 
	transform: translateX(-51px) rotateY(90deg);
}
/*右*/
.n4{ 
 	background-color: #00ffff;
	transform: translateX(51px) rotateY(90deg);
}
/*上*/
.n5{ 
 	background-color: #00ffff;
	transform: translateY(-51px) rotateX(90deg);
}
/*下*/
.n6{
 	background-color: black;
	transform: translateY(51px) rotateX(90deg);
}
/*里面盒子的六个面结束*/
/*动画*/
@keyframes mofan{
	from{
		transform: translate(-50%,-50%) rotateY(0deg) rotateX(0deg) ;
	}
	to{
		transform: translate(-50%,-50%) rotateY(360deg) rotateX(0deg);
	}
}

@keyframes nixuan{
	from{
		transform: translate(-50%,-50%) rotateY(0deg) rotateX(0deg) ;
	}
	to{
		transform: translate(-50%,-50%) rotateY(-360deg) rotateX(0deg);
	}
}



/*外面的盒子*/

.box>.out{
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center; 
	position: absolute;
	left: 50%;
	top: 50%;
	transform-style: preserve-3d;
	transform: translate(-50%,-50%) ;
	/*调用动画*/
	animation: mofan 5s linear 0s infinite normal;
	color: white; 
	
}
  
 

.box>.out>.t1,.t2,.t3,.t4,.t5,.t6{
	width: 200px;
	height: 200px;
	position: absolute;
	opacity: 0.5;
	border: 1px solid white;

}
/*前*/
.t1{ 
	background-color: black;
	transform:translateZ(100px);
}
/*后*/
.t2{ 
	background-color: black;
	transform: translateZ(-100px);


}
/*左*/
.t3{ 
	background-color: black;
	transform: translateX(-100px) rotateY(90deg);
}
/*右*/
.t4{ 
	background-color: black; 
	transform: translateX(100px) rotateY(90deg);
}
/*上*/
.t5{ 
	background-color: black;
	transform: translateY(-100px) rotateX(90deg);
}
/*下*/
.t6{ 
	background-color: black;
	transform: translateY(100px) rotateX(90deg);
}

.box:hover>.out>.t1{
	transform: translateZ(300px);
	transition: all 0.3s linear;
}

.box:hover>.out>.t2{
	transform: translateZ(-300px);
	transition: all 0.3s linear;
}
.box:hover>.out>.t3{
	transform: translateX(-300px) rotateY(90deg);
	transition: all 0.3s linear;
}

.box:hover>.out>.t4{
	transform: translateX(300px) rotateY(90deg);
	transition: all 0.3s linear;
}

.box:hover>.out>.t5{
	transform: translateY(-300px) rotateX(90deg);
	transition: all 0.3s linear;
}
.box:hover>.out>.t6{
	transform: translateY(300px) rotateX(90deg);
	transition: all 0.3s linear;
}

/*鼠标悬浮时外盒子逆转*/
 .box:hover>.out{
 	animation: nixuan 5s linear 0s infinite normal;
 }
 
	
.n1,.n4,.n5{
	background-image: linear-gradient(to right,#00ffff,black)
}

.k1{
	width: 29.3px;
	height: 29.3px;
	border: 2px solid white;
	float: left;
	border-radius: 2px;
}