首页 > 代码库 > css3 3d正反面翻转

css3 3d正反面翻转

2024-10-12 16:43:02   213人阅读

<!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>

原文：http://www.jianshu.com/p/99aeb911f547；

https://segmentfault.com/a/1190000003903190

css3 3d正反面翻转


联系
我们