一般情况下需要翻转的盒子是排列着的 所以 在li中套两个盒子，分别为front 和 back
css部分
.front{
position: absolute;
background-position: 0 bottom;
}
.back{
position: absolute;
backface-visibility: hidden !important;
-moz-backface-visibility: hidden !important;
-ms-backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-webkit-transition: all 0.2s;
background-position: -305px bottom;
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
js部分：
$('.front').mouseover(function(){
$(this).removeClass('fanzhuan1').addClass('fanzhuan2');
$(this).next().addClass('fanzhuan1');
})
$('.back').mouseleave(function(){
$(this).removeClass('fanzhuan1').addClass('fanzhuan2');
$(this).prev().addClass('fanzhuan1');
})
