卡片翻转

闲来无事，最近在学css3的新属性，然后就做了一个简单的卡牌翻转效果，一个小东西，搬出来献丑和大家分享下

//body部分

<div id="card">
        <div id="frontFace">
            <h3>翻开有惊喜哦</h3>
            <center><button id="btn" οnclick="cardBefore()">点击我翻面</button></center>
        </div>
        <div id="otherSide">
            <h3>哈哈，被骗了吧</h3>
            <center><button id="btn2" οnclick="otherSides()">重新来过</button></center>
        </div>
    </div>

//css部分

<style>
        body{padding: 0;margin: 0;}
        h3{font-family: 'Lobster', cursive;font-size: 24px;text-align: center;}
        #card{
        width: 12.5em;height: 16.75em;
        margin: 5px;
        perspective: 800px;
        position: absolute;
        top: 50%;left: 50%;
        margin-left:-6.25em ;margin-top: -8.375em;}
        #frontFace{
            position: absolute;
            width: 100%;height: 100%;
            border: 1px solid red;
            background-color: red;
            opacity: 0.8;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
            backface-visibility: hidden;}
        #otherSide{
            position: absolute;
            width: 100%;height: 100%;
            border: 1px solid white;
            background-color: white;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
            backface-visibility: hidden;/*隐藏被旋转元素背面的元素*/
            transform: rotateY(-180deg);
            transition: 1s;/*旋转时间*/
        }

     button{
            background-color: white;
            font-family: 'Lobster', cursive;
            font-size: 22px;
            padding: 15px 32px;
            border: none;
            opacity: 0.8;
            }
        #btn{border-radius:8px;}
        #btn2{border-radius: 8px;background-color: black;color: white;}
     </style>

//js部分

<script>
    var i = 0;
    var frontFace = document.getElementById("frontFace");
    var otherSide = document.getElementById("otherSide");
    function cardBefore() {
        i++;
        setTimeout(function() {
            i = 0;
        },500)
        if(i > 1) {
            console.log("去反面");
            frontFace.style.transform = "rotateY(180deg)";
            otherSide.style.transform = "rotateY(0deg)";
            i = 0;
        }
    }
    function otherSides() {
        i++;
        setTimeout(function() {
            i = 0;
        },500)
        if(i > 1) {
            console.log("去正面");
            frontFace.style.transform = "rotateY(0deg)";
            otherSide.style.transform = "rotateY(-180deg)";
            i = 0;
        }
    }
</script>