.zuida {
	width:700px;
	height:600px;
	background:#666;
	position:relative;
	perspective:800px;
	margin:0 auto;
}
.aa {
	width:100px;
	height:100px;
	position:absolute;
	left:300px;
	top:210px;
	transform-style:preserve-3d;
	transform-origin:center center;
	transform:rotateY(0deg) rotateX(0deg);
	transition:transform 4s linear;
}
.aa:hover {
	transform:rotateY(360deg) rotateX(360deg);
	transition:transform 4s linear;
}
.a1,.a2,.a3,.a4,.a5,.a6 {
	width:100px;
	height:100px;
	position:absolute;
	color:#fff;
	opacity:0.5;
}
.a1 {
	background:#f00;
	left:-50px;
	transform:rotateY(90deg);
}
.a2 {
	background:#F60;
	left:50px;
	transform:rotateY(90deg);
}
.a3 {
	background:#fff000;
	transform:translateZ(50px);
}
.a4 {
	background:#0f0;
	transform:translateZ(-50px);
}
.a5 {
	background:#00f;
	transform:rotateX(90deg);
	top:-50px;
}
.a6 {
	background:#f0f;
	transform:rotateX(90deg);
	top:50px;
}
.b1,.b2,.b3,.b4,.b5,.b6 {
	width:200px;
	height:200px;
	position:absolute;
	opacity:0.8;
}
.b1 {
	left:-150px;
	top:-50px;
	transform:rotateY(270deg);
	background:url(http://www.jq22.com/img/cs/500x500-1.png);
	transition:left 1.5s;
}
.aa:hover .b1 {
	left:-250px;
	transition:left 1.5s 0.5s linear;
}
.b2 {
	left:50px;
	top:-50px;
	transform:rotateY(270deg);
	background:url(http://www.jq22.com/img/cs/500x500-2.png);
	transition:left 1.5s;
}
.aa:hover .b2 {
	left:150px;
	transition:left 1.5s 0.5s linear;
}
.b3 {
	left:-50px;
	top:-50px;
	transform:translateZ(100px);
	background:url(http://www.jq22.com/img/cs/500x500-3.png);
	transition:transform 1.5s;
}
.aa:hover .b3 {
	transform:translateZ(200px);
	transition:transform 1.5s 0.5s linear;
}
.b4 {
	left:-50px;
	top:-50px;
	transform:translateZ(-100px);
	background:url(http://www.jq22.com/img/cs/500x500-4.png);
	transition:transform 1.5s;
}
.aa:hover .b4 {
	transform:translateZ(-200px);
	transition:transform 1.5s 0.5s linear;
}
.b5 {
	left:-50px;
	top:-150px;
	transform:rotateX(90deg);
	background:url(http://www.jq22.com/img/cs/500x500-5.png);
	transition:top 1.5s;
}
.aa:hover .b5 {
	top:-250px;
	transition:top 1.5s 0.5s linear;
}
.b6 {
	left:-50px;
	top:50px;
	transform:rotateX(90deg);
	background:url(http://www.jq22.com/img/cs/500x500-6.png);
	transition:top 1.5s linear;
}
.aa:hover .b6 {
	top:150px;
	transition:top 1.5s 0.5s linear;
}