前端屌丝

导航

使用css3进行简单的卡片翻转 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset=utf-8>
    <script src="jquery.js"></script>
    <title></title>
    <style>
        body{background:#e5e5e5;}
        .card{-webkit-perspective:300;width:80px;height:120px;margin:8px;position:relative}
        .face{border-radius:10px;width:100%;height:100%;position:absolute;
            -webkit-transition:all 0.4s;-webkit-backface-visibility:hidden;
        }
        .front{background: blue;z-index:10;}
        .back{-webkit-transform:rotate3d(1,0,0,-180deg);z-index:8;}
        .card-flipped .front{-webkit-transform:rotate3d(1,0,0,180deg);z-index:8;}
        .card-flipped .back{-webkit-transform:rotate3d(1,0,0,0deg);z-index:10;}
        .cardAK{background:red;}
    </style>
</head>
<body>

<div class="card">
    <div class="face front">abbbdd</div>
    <div class="face back cardAK">31654</div>
</div>

<script>
    $(function(){
        $('.card').hover(function() {
            $(this).toggleClass("card-flipped");
        });
    });
</script>
</body>
</html>

　　参考地址：http://blog.csdn.net/foreverkoking/article/details/11391203

posted on 2013-10-25 16:24  前端屌丝  阅读(444)  评论(0)    收藏  举报