.big {
	width:400px;
	height:400px;
	border:1px solid transparent;
	perspective:10000px;
	transform-style:preserve-3d;
	transform:rotatex(302deg) rotatez(67deg);
}
body {
	width:1400px;
	height:1400px;
	border:1px solid transparent;
}
.big {
	animation:fei 20s ease-in-out 0s infinite alternate;
}
.a {
	width:200px;
	height:200px;
	border:1px solid transparent;
	position:absolute;
	margin:25px;
}
.b {
	width:300px;
	height:300px;
	border:1px solid transparent;
	position:absolute;
	opacity:0.6;
	box-shadow:0px 0px 8px 15px yellow;
	animation-fill-mode:forwords;
	animation-play-state:running;
}
.big:hover .b {
	animation:feikai 0.1s ease-in-out 0s;
}
.img1 {
	transform:translate(100px,0px) rotatey(90deg);
	transform-origin:(left);
}
.img2 {
	transform:translate(-100px,0px) rotatey(90deg);
	transform-origin:(right);
}
.img3 {
	transform:translate(0px,100px) rotatex(90deg);
	transform-origin:(bottom);
}
.img4 {
	transform:translate(0px,-100px) rotatex(90deg);
	transform-origin:(top);
}
.img5 {
	transform:translatez(100px);
}
.img6 {
	transform:translatez(-100px);
}
.img11 {
	transform:translate(150px,0px) rotatey(90deg);
	transform-origin:(left);
}
.big:hover .img11 {
	transform:translate(850px,0px) rotatey(90deg);
	transform-origin:(left);
}
.img22 {
	transform:translate(-150px,0px) rotatey(90deg);
	transform-origin:(right);
}
.big:hover .img22 {
	transform:translate(-250px,0px) rotatey(90deg);
	transform-origin:(right);
}
.img33 {
	transform:translate(0px,150px) rotatex(90deg);
	transform-origin:(bottom);
}
.big:hover .img33 {
	transform:translate(0px,250px) rotatex(90deg);
	transform-origin:(bottom);
}
.img44 {
	transform:translate(0px,-150px) rotatex(90deg);
	transform-origin:(top);
}
.big:hover .img44 {
	transform:translate(0px,-250px) rotatex(90deg);
	transform-origin:(top);
}
.img55 {
	transform:translatez(150px);
}
.big:hover .img55 {
	transform:translateZ(250PX);
}
.img66 {
	transform:translatez(-150px);
}
.big:hover .img66 {
	transform:translatez(-250px)
}
@keyframes feikai {
	0% {
	transform:translate(150px,0px);
}
}100% {
	transform:translate3D(250px,0px);
}
@keyframes fei {
	0% {
	position:absolute;
	left:100px;
	top:100px;
	transform:rotate(0deg)skew(45deg);
}
10% {
	position:absolute;
	left:1000px;
	top:1000px;
	transform:rotatex(2700deg)rotate(270deg);
}
20% {
	position:absolute;
	left:800px;
	top:0px;
	transform:rotatex(90deg)rotatez(290deg);
}
30% {
	position:absolute;
	left:1180px;
	top:10px;
	transform:rotatex(27deg)rotatez(27deg);
}
40% {
	position:absolute;
	left:300px;
	top:1100px;
	transform:rotatex(270deg)rotatez(27deg);
}
50% {
	position:absolute;
	left:900px;
	top:1100px;
	transform:rotatex(44deg)rotatez(90deg);
}
60% {
	position:absolute;
	left:30px;
	top:50px;
	transform:rotatey(7200deg)rotatez(40deg);
}
70% {
	position:absolute;
	left:300px;
	top:80px;
	transform:rotatex(270deg))rotatez(90deg);
}
80% {
	position:absolute;
	left:300px;
	top:250px;
	transform:rotatey(300deg)rotatex(44deg);
}
90% {
	position:absolute;
	left:800px;
	top:0px;
	transform:rotatey(0deg)rotatez(90deg);
}
100% {
	position:absolute;
	left:1000px;
	top:1000px;
	transform:rotatez(300deg)rotatex(44deg)rotatey(90deg) skew(45deg);
}