css3点击翻转展示卡片效果

作者: MJ 分类: css 发布时间: 2018-06-29 17:15
<!DOCTYPE html>
<html >
<head>
    <title>test</title>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <meta name="author" content="xuyunfei">
    <meta name="description" content="">
    <meta name="keywords" content="test,html">
    <title>test</title>
    <style>
        *{ 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
        }
        .container, .container.one, .two{ 
            width: 100px; 
            height: 100px; 
        }
        .container{ 
            position: relative; 
            transition: 1s; 
            transform-style: preserve-3d; 
        }
        .one{ 
            position: absolute; 
            top: 0; 
            background: red; 
            transform: rotateY(180deg);
            backface-visibility: hidden;
         }
        .two{ 
            position: absolute; 
            top: 0; 
            background: yellow;
            backface-visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">隐藏在背后的元素</div>
        <div class="two">初始显示在前面的元素</div>
    </div>

    <button id="btn">点击反转</button>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(() => {
            $("#btn").click(() => {
                if($(".container").attr("style") == undefined){
                    $(".container").css("transform","rotateY(180deg)");
                }else{
                    $(".container").removeAttr("style");
                }
                
            });
        })
    </script>
</body>
</html>

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注