css3 3d正反面翻转

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    style>
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    /*.flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }*/

     .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    background: red;
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
    background: cyan;
}


#myCard {
    padding-top:300px;
    }
    style>

head>
body>
    
    div class="flip-container">
    div class="flipper">
        div class="front">
            前面内容
        div>
        div class="back">
            背面内容
        div>
    div>



    
div>
    
    div id="myCard">butdiv>

    script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
    script>
        $(function(){
            $(‘#myCard‘).click(function(){
                $(‘.flip-container‘).toggleClass(‘hover‘)
            })
        })
    script>
body>
html>