* {margin:0; padding:0; font-family:"微软雅黑"; font-size:14px; }
body{}
.box{width:960px;height:230px;margin:0px auto 0;background:url(fanzhuan_bg.jpg);}
.box ul li{width:180px;height:180px;/*布局完去掉黑色 background:#000;*/list-style:none;display:inline-block;
	border-radius:50%;margin:25px 27px;cursor:pointer;
	box-shadow:0 0 0 10px rgba(255,255,255,0.6),0 0 0 3px rgba(0,0,0,0.5);position:relative;overflow:hidden;
	-webkit-transition: box-shadow 0.5s ease-out 0s;
	-moz-transition: box-shadow 0.5s ease-out 0s;
	transition: box-shadow 0.5s ease-out 0s;}
	
/*旋转层开始：*/
.b_3d{width:180px;height:180px;position:absolute;transform-style:preserve-3d;transition:all 1s;}
.b_3d > div{position:absolute;width:100%;height:100%;border-radius:50%;display:block;
	backface-visibility:hidden;/*隐藏背面*/background-position:center center;}
	
/*正面开始：*/
.b_z{position:absolute;width:100%;height:100%;background-position:center center;border-radius:50%;}
.b_img1{background:url(fanzhuan1.jpg) no-repeat;}
.b_img2{background:url(fanzhuan2.jpg) no-repeat;}
.b_img3{background:url(fanzhuan3.jpg) no-repeat;}
.b_img4{background:url(fanzhuan4.jpg) no-repeat;}

/*反面开始：*/
.b_text{background:#000;width:100%;height:100%;color:#fff;transform:rotate3d(0,1,0,180deg);text-align:center;}
.b_text h2{font-size:20px;text-transform:uppercase;padding-top:50px;}
.b_text p{font-size:16px;}

/*鼠标滑过显示代码：*/
.box ul li:hover{box-shadow:0 0 0 20px rgba(255,131,251,1);}
.box ul li:hover .b_3d{transform:rotate3d(0,1,0,-180deg);}