.bb{
			width: 100%;
			height: 500px;
		}
		.container{
			position: relative;
		height: 150px;width: 150px;
		margin: 0 auto;
		transform-style: preserve-3d;
		}
		.cloud_box a{
			width: 100%;
			height: 100%;
			
		}
		
			.cloud_top{
				
				background: url(../img/index/top.png);
				background-size: cover;
			-webkit-transform:translateY(-50px) rotateX(90deg);
			-moz-transform:translateY(-50px) rotateX(90deg);	
			-o-transform:translateY(-50px) rotateX(90deg);
			-ms-transform:translateY(-50px) rotateX(90deg);
			transform:translateY(-50px) rotateX(90deg);
			position:absolute;
		
		
			}
			.cloud_right{
		background: url(../img/index/right.png);
				background-size: cover;
			-webkit-transform:rotatey(90deg) translateZ(-50px);
			-o-transform:rotatey(90deg) translateZ(-50px);
			-moz-transform:rotatey(90deg) translateZ(-50px);
			-ms-transform:rotatey(90deg) translateZ(-50px);
			transform:rotatey(90deg) translateZ(-50px);
			position:absolute;
	
	
			}
			.cloud_left{
		background: url(../img/index/right.png);
				background-size: cover;
				
				-webkit-transform:rotatey(-90deg) translateZ(-50px) rotateX(180deg);
				-moz-transform:rotatey(-90deg) translateZ(-50px) rotateX(180deg);
				-o-transform:rotatey(-90deg) translateZ(-50px) rotateX(180deg) ;
				-ms-transform:rotatey(-90deg) translateZ(-50px) rotateX(180deg);
				transform:rotatey(-90deg) translateZ(-50px) rotateX(180deg);
				
				position:absolute;
		
	
			}
			.cloud_bottom{
		background: url(../img/index/top.png);
				background-size: cover;
				
		-webkit-transform:rotatex(-90deg) translatez(50px);
		-moz-transform:rotatex(-90deg) translatez(50px);
		-o-transform:rotatex(-90deg) translatez(50px);
		-ms-transform:rotatex(-90deg) translatez(50px);
		transform:rotatex(-90deg) translatez(50px);
			position:absolute;
		
			}
				.cloud_qian{
			background: url(../img/index/left.png);
				background-size: cover;
				-webkit-transform:translateZ(50px);
				-moz-transform:translateZ(50px);
				-o-transform:translateZ(50px);
				-ms-transform:translateZ(50px);
				transform:translateZ(50px);
		position:absolute;}
		
		 	.cloud_hou{
				background: url(../img/index/left.png);
				background-size: cover;
				position:absolute;
				-webkit-transform:translateZ(-50px);
				-moz-transform:translateZ(-50px);
				-o-transform:translateZ(-50px);
				-ms-transform:translateZ(-50px);
				transform:translateZ(-50px);
				}
		
		 	@-webkit-keyframes spin{
    0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg)}
}
@-webkit-keyframes fangda{
	0%{width:0;
	height: 0;}
	
	100%{
		width:150px;
		height:150px;}
}
@-o-keyframes spin{
    0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg)}
}
@-o-keyframes fangda{
	0%{width:0;
	height: 0;}
	
	100%{
		width:150px;
		height:150px;}
}
@-ms-keyframes spin{
    0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg)}
}
@-ms-keyframes fangda{
	0%{width:0;
	height: 0;}
	
	100%{
		width:150px;
		height:150px;}
}
@-moz-keyframes spin{
    0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg)}
}
@-moz-keyframes fangda{
	0%{width:0;
	height: 0;}
	
	100%{
		width:150px;
		height:150px;}
}
.container div{
	 -webkit-animation:fangda 2s linear forwards;
	 -moz-animation:fangda 2s linear forwards;
	 -o-animation:fangda 2s linear forwards;
	 -ms-animation:fangda 2s linear forwards;
		animation:fangda 2s linear forwards;
}


.container{
	 -ms-animation:spin 10s linear infinite;
    -moz-animation:spin 10s linear infinite;
    -o-animation:spin 10s linear infinite;
    -webkit-animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
}