点击翻牌的效果展示，backface-visibility:hidden是关键差点忘了toggle（）

最新推荐文章于 2023-04-26 09:13:52 发布

weixin_33704591

最新推荐文章于 2023-04-26 09:13:52 发布

阅读量435

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5a12878bf265da432f30b99a

版权

    body,div,p,span{
        margin: 0px;
        padding: 0px;
    }
    .box{
        width: 200px;
        height: 300px;
        position: relative;
        margin: 100px auto;
        perspective: 600px;
    }
    .box div{
        height: 100%;width:100%;
        position: absolute; left: 0px; top: 0px;
        backface-visibility:hidden;
        transition-duration: 0.4s;
        text-align: center;
        line-height: 300px;
        color: #ffffff;
        font-size: 30px;
    }
    .box div:nth-of-type(1){
        background-color: red;
        transform:rotateY(0deg);
    }
    .box div:nth-of-type(2){
        background-color: green;
        transform:rotateY(-180deg);
    }
    .box.turn div:nth-of-type(1){
        transform:rotateY(180deg)
    }
    .box.turn div:nth-of-type(2){
        transform:rotateY(0deg)
    }


    <div class="box">
        <div>正</div>
        <div>00011</div>
    </div>


    document.querySelector("div.box").onclick = function (){
        this.classList.toggle('turn');     //classList是当前元素的className集合
        return false;
    }复制代码