css3 翻牌效果

<!DOCTYPE html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>CSS3卡牌翻牌效果</title>

    <style type="text/css">

        #box {

            width: 200px;

            height: 337px;

            /*background: url('tarot_back.jpg') 0 0 no-repeat;*/

            /*background: red;*/

            -webkit-transition: -webkit-transform 0.4s ease-in, width 1s, background 0.8s;

        }

        .nor {

            background: red;

            -webkit-transform: rotate3d(0, 1, 0, 0deg);

        }

        .back {

            background: green;

            -webkit-transform: rotate3d(0, 1, 0, 180deg);

        }

    </style>

</head>

<body>

<div id="box" class="nor">

</div>

</body>

<script type="text/javascript">

    function $(d) {

        return document.getElementById(d);

    }

    var box = $('box');

    box.addEventListener('click', function (e) {

        box.className = 'back';

        setTimeout(function () {

            box.className = 'nor';

        }, 500);

    }, false);

</script>

</html>
相关文章
