/* CSS Document */

ul,li,div,p,body,html{margin:0; padding:0;}
ul{list-style:none;}


/************图片翻动******************/
#xiaoguo{margin:60px auto; overflow:hidden; width:660px;}
#xiaoguo li{float:left; margin:10px; position:relative; z-index:1; width:200px; height:200px; overflow:hidden;}
#xiaoguo li span{position:absolute; z-index:-1; left:0; top:0; width:100%; height:100%;}

#xiaoguo li.f_top span{transform-origin:0 0; animation:enter1 0.3s; z-index:1; -webkit-transform-origin:0 0; -webkit-animation:enter1 0.3s;}
#xiaoguo li.f_right span{transform-origin:100% 100%; animation:enter2 0.3s; z-index:1; -webkit-transform-origin:100% 100%; -webkit-animation:enter2 0.3s;}
#xiaoguo li.f_bottom span{transform-origin:0 100%; animation:enter2 0.3s; z-index:1; -webkit-transform-origin:0 100%; -webkit-animation:enter2 0.3s;}
#xiaoguo li.f_left span{transform-origin:0 100%; animation:enter1 0.3s; z-index:1; -webkit-transform-origin:0 100%; -webkit-animation:enter1 0.3s;}



#xiaoguo li.t_top span{transform-origin:0 0; animation:leave1 0.3s; -webkit-transform-origin:0 0; -webkit-animation:leave1 0.3s;}
#xiaoguo li.t_right span{transform-origin:100% 100%; animation:leave2 0.3s; -webkit-transform-origin:100% 100%; -webkit-animation:leave2 0.3s;}
#xiaoguo li.t_bottom span{transform-origin:0 100%; animation:leave2 0.3s; -webkit-transform-origin:0 100%; -webkit-animation:leave2 0.3s;}
#xiaoguo li.t_left span{transform-origin:0 100%; animation:leave1 0.3s; -webkit-transform-origin:0 100%; -webkit-animation:leave1 0.3s;}




@keyframes enter1{
	0%{transform:rotate(-90deg);}	
	100%{transform:rotate(0deg);}
}
@keyframes enter2{
	0%{transform:rotate(90deg);}	
	100%{transform:rotate(0deg);}
}
@keyframes leave1{
	0%{transform:rotate(0deg); z-index:1;}	
	100%{transform:rotate(-90deg); z-index:1;}
}
@keyframes leave2{
	0%{transform:rotate(0deg); z-index:1;}	
	100%{transform:rotate(90deg); z-index:1;}
}

@-webkit-keyframes enter1{
	0%{-webkit-transform:rotate(-90deg);}	
	100%{-webkit-transform:rotate(0deg);}
}
@-webkit-keyframes enter2{
	0%{-webkit-transform:rotate(90deg);}	
	100%{-webkit-transform:rotate(0deg);}
}
@-webkit-keyframes leave1{
	0%{-webkit-transform:rotate(0deg); z-index:1;}	
	100%{-webkit-transform:rotate(-90deg); z-index:1;}
}
@-webkit-keyframes leave2{
	0%{-webkit-transform:rotate(0deg); z-index:1;}	
	100%{-webkit-transform:rotate(90deg); z-index:1;}
}