css3 3d正反面翻转

开发者乐萱技术 2022年11月7日

0 收藏 529 点赞 196 浏览 1337 个字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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" ontouchstart="this.classList.toggle('hover');"> -->
    <div class="flip-container">
    <div class="flipper">
        <div class="front">
            前面内容
        </div>
        <div class="back">
            背面内容
        </div>
    </div></div>
    <!-- /<div id="myCard" onclick="document.querySelector('.flip-container').classList.toggle('hover')">but</div> -->
    <div id="myCard">but</div>    <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>