#Header1_HeaderTitle{
animation: titles 2s infinite linear alternate ;}
#header {background:none !important}

@keyframes titles{
     0%{color:rgb(244, 230, 207);}                
     100%{color:rgb(99, 69, 33);}
}




*{
	margin: 0;
	padding: 0;
}

.box{
	width: 100px;
	height: 100px;
	/*border: 1px solid red;	*/
	position:absolute;
	top:50px;
	right:80px;
	perspective: 800px;
	/*写静态模型的时候，可以通过调整这2个参数来调整观察角度，好观察到侧边*/
	perspective-origin:center -100%;
        opacity:0.4

}
.box .big{
	position:relative;
	width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation:move 6s linear 0s  infinite alternate ;

}

.big li{
	position:absolute;
	list-style: none;
	opacity: 0.8;
	text-align:center;
	transition: all .4s;
	
}
.big .out{
	width: 100%;
 	height: 100%;
 	line-height:100px;
}
.big .litle{
	width: 50%;
 	height: 50%;
 	line-height:50px;
 	top:25px;
	left:25px;
}

/*正面*/
.big li:nth-child(1){
	background-image:url(https://images.cnblogs.com/cnblogs_com/phpjinggege/1156227/t_1.jpg);
	background-position:100%  100%;
	/*先旋转和先位移效果不同，大家可以试试，通过这2个来调正平面的位置 默认都是以面的中心点作为旋转和位移参考位置的*/
	transform: rotateY(0deg) translateZ(50px);
	/*display: none;*/

}
/*作为左边*/
.big li:nth-child(2){  
	background-image:url(https://images.cnblogs.com/cnblogs_com/phpjinggege/1156227/t_2.jpg);
	background-position:100%  100%;
	transform: rotateY(-90deg) translateZ(50px);
	/*display: none;*/
}
/*作为后边*/
.big li:nth-child(3){
	background-image:url(https://images.cnblogs.com/cnblogs_com/phpjinggege/1156227/t_3.jpg);
	background-position:100%  100%;
	transform: rotateY(-180deg) translateZ(50px);
	/*display: none;*/
}
/*作为右边*/
.big li:nth-child(4){
	background-image:url(https://images.cnblogs.com/cnblogs_com/phpjinggege/1156227/t_4.jpg);
	background-position:100%  100%;
	transform: rotateY(90deg) translateZ(50px);
	/*display: none;*/
}
/*作为顶部*/
.big li:nth-child(5){
	background-image:url(https://images.cnblogs.com/cnblogs_com/phpjinggege/1156227/t_5.jpg);
	background-position:100%  100%;
	transform: rotateX(90deg) translateZ(50px);
	/*display: none;*/
}
/*作为底部*/
.big li:nth-child(6){
	background-image:url(https://images.cnblogs.com/cnblogs_com/phpjinggege/1156227/t_6.jpg);
	background-position:100%  100%;
	transform: rotateX(-90deg) translateZ(50px);
	/*display: none;*/
}



/*正面*/
.big li:nth-child(7){
	background-image:url(https://images.cnblogs.com/cnblogs_com/phpjinggege/1156227/t_7.jpg);
	background-position:100%  100%;
	/*先旋转和先位移效果不同，大家可以试试，通过这2个来调正平面的位置 默认都是以面的中心点作为旋转和位移参考位置的*/
	transform: rotateY(0deg) translateZ(25px);

}
/*作为左边*/
.big li:nth-child(8){  
	background-image:url(https://images.cnblogs.com/cnblogs_com/phpjinggege/1156227/t_8.jpg);
	background-position:100%  100%;
	transform: rotateY(-90deg) translateZ(25px);
}
/*作为后边*/
.big li:nth-child(9){
	background-image:url(https://images.cnblogs.com/cnblogs_com/phpjinggege/1156227/t_9.jpg);
	background-position:100%  100%;
	transform: rotateY(-180deg) translateZ(25px);
}
/*作为右边*/
.big li:nth-child(10){
	background-image:url(https://images.cnblogs.com/cnblogs_com/phpjinggege/1156227/t_10.jpg);
	background-position:100%  100%;
	transform: rotateY(90deg) translateZ(25px);
}
/*作为顶部*/
.big li:nth-child(11){
	background-image:url(https://images.cnblogs.com/cnblogs_com/phpjinggege/1156227/t_11.jpg);
	background-position:100%  100%;
	transform: rotateX(90deg) translateZ(25px);
}
/*作为底部*/
.big li:nth-child(12){
	background-image:url(https://images.cnblogs.com/cnblogs_com/phpjinggege/1156227/t_12.jpg);
	background-position:100%  100%;
	transform: rotateX(-90deg) translateZ(25px);
}



/*定义动画*/
@keyframes move{
	from{transform:rotateY(0deg)  rotateX(0deg);}
	to{transform:rotateY(360deg) rotateX(360deg)}
}


/*定义hove效果*/
.big:hover .out:nth-child(1) {
	transform: rotateY(0deg) translateZ(100px);
}

.big:hover .out:nth-child(2) {
	transform: rotateY(-90deg) translateZ(100px);
}

.big:hover .out:nth-child(3) {
	transform: rotateY(-180deg) translateZ(100px);
}

.big:hover .out:nth-child(4) {
	transform: rotateY(90deg) translateZ(100px);
}

.big:hover .out:nth-child(5) {
	transform: rotateX(90deg) translateZ(100px);
}

.big:hover .out:nth-child(6) {
	transform: rotateX(-90deg) translateZ(100px);
}