* {
	margin: 0;
	padding: 0;
}
body {
	background: #000;
}
.window {
	position: relative;
	/* float: left; */
	margin: 0 auto;
	perspective: 800px;
/*	perspective-origin: 10% 10%;*/
}
.father {
	position: relative;
	width: 180px;
	height: 180px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform-origin: 50% 50% -90px; /*中心旋转*/
	/*transform-origin: 0 100px; 绕左前轴旋转*/
	/*transform: translateZ(-150px);*/
	animation: xuanz 5s linear 1s infinite;
	-ms-transform-style:none;
/*	-ms-transform:perspective(800px);*/
}

/*
.father div{
	position:absolute;
	width: 180px;
	height: 180px;
	line-height:180px;
}
*/

.children {
	position: absolute;
	width: 100%;
	height: 100%;
	/*transition:all 1s ease;*/
	opacity: 1;
	
	-ms-backface-visibility: hidden;
}
.c1 {
	background-image: url("http://zhuanti.9998.tv/15years/images/3dtu1.jpg");
	transform-origin: bottom;
	transform:rotateX(90deg);
	-ms-transform:perspective(800px) rotateX(90deg);
	-ms-transform-origin: bottom;
}
.c2 {
	background-image: url("http://zhuanti.9998.tv/15years/images/3dtu2.jpg");
       /*background: white;*/
	-ms-transform: perspective(800px);
		
}
.c3 {
	background-image: url("http://zhuanti.9998.tv/15years/images/3dtu3.jpg");
	transform:translateZ(-180px);
	-ms-transform:perspective(800px)  translateZ(-180px);
	
}
.c4 {
	transform-origin: top;
	background-image: url("http://zhuanti.9998.tv/15years/images/3dtu4.jpg");
	transform:rotateX(-90deg);
	-ms-transform:perspective(800px) rotateX(-90deg);
	-ms-transform-origin: top;
}
.c5 {
	background-image: url("http://zhuanti.9998.tv/15years/images/3dtu5.jpg");
	transform: rotateY(90deg);
	transform-origin: left;
	-ms-transform:perspective(800px) rotateY(90deg);
	-ms-transform-origin: left;
}
.c6 {
	transform: rotateY(-90deg);
	-ms-transform:perspective(800px) rotateY(-90deg);
	background-image: url("http://zhuanti.9998.tv/15years/images/3dtu6.jpg");
	transform-origin: right;
	-ms-transform-origin: right;
}
@keyframes xuanz{
	0% {
		transform: rotateY(0deg);
		-ms-transform:perspective(800px) rotateY(0deg);
	}
	20% {
		transform: rotateY(90deg);
		-ms-transform:perspective(800px) rotateY(90deg);
	}
	40% {
		transform: rotateY(180deg);
		-ms-transform:perspective(800px) rotateY(180deg);
	}
	80% {
		transform: rotateY(270deg);
		-ms-transform:perspective(800px) rotateY(270deg);
	}
	100% {
		transform: rotateY(360deg);
		-ms-transform:perspective(800px) rotateY(360deg);
	}
}
.ball {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 100px auto;
	transform-style: preserve-3d;
	animation: gundong 5s linear 1s infinite;
}
.xcircle,.ycircle,.zcircle {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	border-radius: 50%;
	transition:all 1s ease;
}
.x1,.x3,.y1,.y3,.z1,.z3 {
	width: 87.5%;
	height: 87.5%;
	margin: 6.25% auto;
}
.x2,.y2,.z2 {
	width: 100%;
	height: 100%;
}
.x2,.xLine {
	border: solid 2px blue;
	transform: rotateX(90deg);
}
.z2,.zLine {
	border: solid 2px orange;
	transform: rotateY(90deg);
}
.ycircle,.yLine {
	border: solid 2px red;
}
.yLine {
	transform: rotateZ(90deg);
}
.x1 {
	border: solid 2px blue;
	transform: rotateX(90deg) translateZ(75px);
}
.x3 {
	border: solid 2px blue;
	transform: rotateX(90deg) translateZ(-75px);
}
.z1 {
	border: solid 2px orange;
	transform: rotateY(90deg) translateZ(75px);
}
.z3 {
	border: solid 2px orange;
	transform: rotateY(90deg) translateZ(-75px);
}
.y1 {
	border: solid 2px red;
	transform: translateZ(75px);
}
.y3 {
	border: solid 2px red;
	transform: translateZ(-75px);
}
.xLine,.yLine,.zLine {
	position: absolute;
	width: 100%;
	top: 50%;
}
@keyframes gundong{
	0% {
		transform: rotateY(0deg) rotateX(0deg);
	}
	20% {
		transform: rotateY(90deg) rotateX(90deg);
	}
	40% {
		transform: rotateY(180deg) rotateX(180deg);
	}
	80% {
		transform: rotateY(270deg) rotateX(270deg);
	}
	100% {
		transform: rotateY(360deg) rotateX(360deg);
	}
}