.box {
	width:250px;
	height:250px;
	border:1px dashed red;
	margin:100px auto;
	position:relative;
	border-radius:50%;
	/* 让子盒子保持3d效果*/

            transform-style:preserve-3d;
	transform:rotateX(30deg) rotateY(-30deg);
	animation:gun 8s linear infinite;
}
.box>div {
	width:100%;
	height:100%;
	position:absolute;
	text-align:center;
	line-height:250px;
	font-size:60px;
	color:#daa520;
}
.left {
	background-color:rgba(255,0,0,0.3);
	/* 变换中心*/
            transform-origin:left;
	/* 变换*/
            transform:rotateY(90deg) translateX(-125px);
}
.right {
	background:rgba(0,0,255,0.3);
	transform-origin:right;
	/* 变换*/
            transform:rotateY(90deg) translateX(125px);
}
.forward {
	background:rgba(255,255,0,0.3);
	transform:translateZ(125px);
}
.back {
	background:rgba(0,255,255,0.3);
	transform:translateZ(-125px);
}
.up {
	background:rgba(255,0,255,0.3);
	transform:rotateX(90deg) translateZ(125px);
}
.down {
	background:rgba(99,66,33,0.3);
	transform:rotateX(-90deg) translateZ(125px);
}
@keyframes gun {
	0% {
	transform:rotateX(0deg) rotateY(0deg);
}
100% {
	transform:rotateX(360deg) rotateY(360deg);
}
}