/*最外层容器样式*/
.wrap{
	/*改变左右上下,图片方块移动*/
	margin: 100px 50px;
	position: relative;
	
}
/*包裹所有容器样式*/
.cube{
	width: 200px;
	height: 200px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	-webkit-animation: rotate 30s infinite;
	/*匀速*/
	animation-timing-function: linear;
}
@-webkit-keyframes rotate{
	from{transform: rotateX(0deg) rotateY(0deg);}
	to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
	position: absolute;
	width: 200px;
	height: 200px;
	opacity: 0.9;
	transition: all .4s;
	border-radius: 10px;
	color: #ffffff;
   display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}

/*定义所有图片样式*/
.pic{
	width: 200px;
	height: 200px;
	border-radius: 10px;
}
.cube .out_front{
	transform: rotateY(0deg) translateZ(100px);
	background: -webkit-gradient(linear, left top, right bottom, from(#0372ac), to(#3fb5b4));
    background: linear-gradient(to bottom right, #0372ac, #3fb5b4);
}
.cube .out_front .bgtsc{font-size:24px;top: -50px; color:#dbf702;}
.cube .out_front .smtsc{font-size:16px;top: 30px;}

.cube .out_back{
	transform: translateZ(-100px) rotateY(180deg);
	background: -webkit-gradient(linear, left top, right bottom, from(#bcaf9c), to(#b5915d));
    background: linear-gradient(to bottom right, #bcaf9c, #b5915d);
}
.cube .out_back .bgtsc{font-size:24px;}
.cube .out_back .smtsc1{font-size:16px;top: -50px;}
.cube .out_back .smtsc2{font-size:16px;top: 50px;}

.cube .out_left{
	transform: rotateY(90deg) translateZ(100px);
	background: -webkit-gradient(linear, left top, right bottom, from(#3abab5), to(#3dc196));
    background: linear-gradient(to bottom right, #3abab5, #3dc196);
}
.cube .out_left .bgtsc{font-size:24px;top: 50px;}
.cube .out_left .smtsc{font-size:16px;top: -30px;}

.cube .out_right{
	transform: rotateY(-90deg) translateZ(100px);
	background: -webkit-gradient(linear, left top, right bottom, from(#3abab5), to(#3daac1));
    background: linear-gradient(to bottom right, #3abab5, #3daac1);
}
.cube .out_right .bgtsc{font-size:24px;top: -50px;}
.cube .out_right .smtsc{font-size:16px;top: 30px;}

.cube .out_top{
	transform: rotateX(90deg) translateZ(100px);
	background: -webkit-gradient(linear, left top, right bottom, from(#e78936), to(#c1b13d));
    background: linear-gradient(to bottom right, #e78936, #c1b13d);
}
.cube .out_top .bgtsc{font-size:24px;text-align: center;}
.cube .out_top .smtsc{font-size:16px;top: 30px;}

.cube .out_bottom{
	transform: rotateX(-90deg) translateZ(100px);
	background: -webkit-gradient(linear, left top, right bottom, from(#3a84ba), to(#59cdf9));
    background: linear-gradient(to bottom right, #3a84ba, #59cdf9);
}
.cube .out_bottom .bgtsc{font-size:24px;top: -50px;}
.cube .out_bottom .smtsc{font-size:16px;top: 30px;}

/*定义小正方体样式*/
.cube span{
	display: bloack;
	width: 100px;
	height: 100px;
	position: absolute;
	border-radius: 5px;
	top: 50px;
	left: 50px;
	display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}
.cube .bgtscin{font-size:24px;}
.cube .smtscin{font-size:16px;top: 30px;}

.cube .in_pic{
	width: 100px;
	height: 100px;
	border-radius: 5px;
}
.cube .in_front{
	transform: rotateY(0deg) translateZ(50px);
	background: -webkit-gradient(linear, left top, right bottom, from(#3abab5), to(#3daac1));
    background: linear-gradient(to bottom right, #3abab5, #3daac1);
}
.cube .in_back{
	transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
	transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
	transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
	transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
	transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{
	transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
	transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
	transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
	transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
	transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
	transform: rotateX(-90deg) translateZ(200px);
}