CSS3动画之百度钱包

百度钱包的步骤：
1.建一个盒子，里面放两个盒子，代表正反面，两个盒子叠一起，正面层次高
2.当鼠标Hover时，正面盒子从0deg->-180deg,反面盒子从-180deg->0deg
3.正反面盒子都设置背面隐藏backface-visibility

HTML结构：
div.box>div.z+div.f

CSS：

        .box{
            width: 300px;
            height: 300px;
            position: relative;
        }
        .z,.f{
            width: 300px;
            height: 300px;
            position: absolute;
            background: url("image/bdbg.png") no-repeat left bottom;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .z{
            z-index: 2;
            -webkit-transition: all 0.3s linear 0s;
            -moz-transition: all 0.3s linear 0s;
            -ms-transition: all 0.3s linear 0s;
            -o-transition: all 0.3s linear 0s;
            transition: all 0.3s linear 0s;
        }
        .f{
            background-position: -305px bottom;
            z-index: 1;
            -webkit-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
            -ms-transform: rotateY(-180deg);
            -o-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
            -webkit-transition: all 0.3s linear 0s;
            -moz-transition: all 0.3s linear 0s;
            -ms-transition: all 0.3s linear 0s;
            -o-transition: all 0.3s linear 0s;
            transition: all 0.3s linear 0s;
        }
        .box:hover .z{
            -webkit-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
            -ms-transform: rotateY(-180deg);
            -o-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
        }
        .box:hover .f{
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }