css3 翻牌效果

最新推荐文章于 2024-08-12 09:24:46 发布

weixin_30687051

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量46

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/human/p/3471723.html

版权

<!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>

转载于:https://www.cnblogs.com/human/p/3471723.html

weixin_30687051

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 翻牌效果

<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>CSS3卡牌翻牌效果</title> <style type="text/css"> ...
复制链接

扫一扫