模拟官方炉石卡牌翻转悬停现浮光 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #demo{
                height: 500px;
                width: 800px;
                margin: 0 auto;
                background: #008000;
            }
            #main{
                padding: 100px;
                position: relative;
                
            }
            #BackArea{
                position: absolute;
                z-index: 999;
            }
            #cardBack{

                transition: transform 0.5s;
                backface-visibility:hidden;
                -webkit-backface-visibility:hidden;    /* Chrome 和 Safari */
                -moz-backface-visibility:hidden;     /* Firefox */
                -ms-backface-visibility:hidden;     /* Internet Explorer */
                /*
                transform:scale(1.05,1.05);
                */
               
            }

            .cardBackTurnBefore{
                
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);    /* Safari 和 Chrome */
                -moz-transform: rotateY(0deg);    /* Firefox */
            }
            .cardBackTurnBefore:hover{
                cursor:pointer;
                transform:scale(1.05,1.05);
                 filter: drop-shadow(0px 0px 30px #fff);
                
            }
            .cardBackTurnAffter{
                transform: rotateY(180deg);
                -webkit-transform: rotateY(180deg);    /* Safari 和 Chrome */
                -moz-transform: rotateY(180deg);    /* Firefox */
            }
            #card{
                position: absolute;
            }
            #cardA{
                transition: transform 0.5s;
                width: calc(375px*0.62);
                height: calc(518px*0.62);
                backface-visibility:hidden;
                -webkit-backface-visibility:hidden;    /* Chrome 和 Safari */
                -moz-backface-visibility:hidden;     /* Firefox */
                -ms-backface-visibility:hidden;     /* Internet Explorer */
            }
            .cardFace{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);    /* Safari 和 Chrome */
                -moz-transform: rotateY(0deg);    /* Firefox */
                
            }
            .cardFaceBack{
                transform: rotateY(180deg);
                -webkit-transform: rotateY(180deg);    /* Safari 和 Chrome */
                -moz-transform: rotateY(180deg);    /* Firefox */
            }

        </style>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <div id='demo'>
            <div id="main">
                <div id="BackArea" onclick="go()">
                    <img id="cardBack" class="cardBackTurnBefore" src="img/hs/cardback.png" />
                </div>
                <div id="card">
                    <img id="cardA"  class="cardFaceBack" src="img/hs/1_tm_hearthstone_gameguide_rise_card-1.png" />
                </div>
            </div>
            
            <script>
                function go(){
                    $('#cardBack').removeClass("cardBackTurnBefore");
                    $('#cardBack').addClass("cardBackTurnAffter");
                    $('#cardA').removeClass("cardFaceBack");
                    $('#cardA').addClass("cardFace");
                }
            </script>
        </div>
    </body>
</html>

Demo使用到的图片：

Demo预览：

posted @ 2019-07-05 16:40  润润润  阅读(180)  评论(0)  编辑  收藏  举报