盒子翻转总结

一般情况下需要翻转的盒子是排列着的 所以 在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');

    })