body {
	margin: 0;
	padding: 0;
	background: url(../img/630.jpg);
}

.box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	perspective: 900px;
}

.box1 {
	width: 400px;
	height: 400px;
	transform-style: preserve-3d;
	transform:translate(-50%, -50%);
	animation: dh 5s linear infinite;
}

.box .box1 div {
	width: 100%;
	height: 100%;
	position: absolute;
	font-size: 20px;
	line-height: 400px;
	text-align: center;
	color: white;
	transition: 0.6s;

}

.box .box1 .font {
	background: url(../img/s1.jpg);
	background-size: 100% 100%;
	opacity:0.8;
	transform: translateZ(200px);
}

.box .box1 .back {
	background: url(../img/s2.jpg);
	background-size: 100% 100%;
	opacity:0.8;
	transform: translateZ(-200px) rotateY(180deg);
}

.box .box1 .right {
	background: url(../img/s3.jpg);
	background-size: 100% 100%;
	opacity:0.8;
	transform: rotateY(90deg) translateZ(200px);
}

.box .box1 .left {
	background: url(../img/s4.jpg);
	background-size: 100% 100%;
	opacity:0.8;
	transform: rotateY(-90deg) translateZ(200px);
}

.box .box1 .top {
	background: url(../img/s5.jpg);
	background-size: 100% 100%;
	opacity:0.8;
	transform: rotateX(90deg) translateZ(200px);
}

.box .box1 .bottom {
	background: url(../img/s6.jpg);
	background-size: 100% 100%;
	opacity:0.8;
	transform: rotateX(-90deg) translateZ(200px);
}


/*������*/

.box .box1:hover .font {
	background: url(../img/s1.jpg);
	background-size: 100% 100%;
	opacity:0.4;
	transition-duration: 1s;
	transform: translateZ(400px);
}

.box .box1:hover .back {
	background: url(../img/s2.jpg);
	background-size: 100% 100%;
	opacity:0.4;
	transition-duration: 1s;
	transform: translateZ(-400px) rotateY(180deg);
}

.box .box1:hover .right {
	background: url(../img/s3.jpg);
	background-size: 100% 100%;
	opacity:0.4;
	transition-duration: 1s;
	transform: rotateY(90deg) translateZ(400px);
}

.box .box1:hover .left {
	background: url(../img/s4.jpg);
	background-size: 100% 100%;
	opacity:0.4;
	transition-duration: 1s;
	transform: rotateY(-90deg) translateZ(400px);
}

.box .box1:hover .top {
	background: url(../img/s5.jpg);
	background-size: 100% 100%;
	opacity:0.4;
	transition-duration: 1s;
	transform: rotateX(90deg) translateZ(400px);
}

.box .box1:hover .bottom {
	background: url(../img/s6.jpg);
	background-size: 100% 100%;
	opacity:0.4;
	transition-duration: 1s;
	transform: rotateX(-90deg) translateZ(400px);
}


/*�γ�ħ��������ת*/
/* @keyframes dh {
	0% {
		transform: rotateX(0deg) rotateY(0deg)
	}

	100% {
		transform: rotateX(360deg) rotateY(360deg);
	}
} */
@keyframes dh {
	0% {
		transform: rotateY(0deg)
	}

	100% {
		transform: rotateY(360deg);
	}
}

.box .box1 i {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	width: 200px;
	height: 200px;
}

.box .box1 .i-font {
	background: url(../img/baby1.jpg);
	background-size: 100% 100%;
	transform: translateZ(100px);
}

.box .box1 .i-back {
	background: url(../img/baby1.jpg);
	background-size: 100% 100%;
	transform: translateZ(-100px) rotateY(180deg);
}

.box .box1 .i-right {
	background: url(../img/baby2.jpg);
	background-size: 100% 100%;
	transform: rotateY(90deg) translateZ(100px);
}

.box .box1 .i-left {
	background: url(../img/baby2.jpg);
	background-size: 100% 100%;
	transform: rotateY(-90deg) translateZ(100px);
}

.box .box1 .i-top {
	background: url(../img/baby1.jpg);
	background-size: 100% 100%;
	transform: rotateX(90deg) translateZ(100px);
}

.box .box1 .i-bottom {
	background: url(../img/baby2.jpg);
	background-size: 100% 100%;
	transform: rotateX(-90deg) translateZ(100px);
}