css3 3d翻牌效果

  css3动画3d翻牌效果,请用firefox和chrome查看示例

css3 3d翻牌效果

<html>
<head>
<title>css3 3d翻牌效果</title>
<style type="text/css">
.kuang{height: 300px;width: 200px;border: 2px solid black;position:relative}
.poker{height: 300px;width: 200px;background-color: #00ffff;position: absolute;left: 0px;top: 0px;
-webkit-transition:all 1s linear;
-webkit-transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
-moz-transition:all 1s linear;
-moz-transform-style:preserve-3d;
-moz-backface-visibility:hidden;}
.pokerback{background-color: #c0c0c0;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);}
</style>
</head>
<body>
<div class="kuang" onclick="flip()">
<div class="poker" id="frontdiv">正面</div>
<div class="poker pokerback" id="backdiv">反面</div>
</div>
</body>
<script type="text/javascript">
    var n = 1;
    function flip() {
        var frontdiv = document.getElementById('frontdiv');
        var backdiv = document.getElementById('backdiv');
        if (n == 1) {
            frontdiv.style.WebkitTransform = "perspective(700) rotateY(-180deg)";
            backdiv.style.WebkitTransform = "perspective(700) rotateY(-0deg)";
            frontdiv.style.MozTransform = "perspective(700) rotateY(-180deg)";
            backdiv.style.MozTransform = "perspective(700) rotateY(-0deg)";
            n = 0;
        } else {
            frontdiv.style.WebkitTransform = "perspective(700) rotateY(0deg)";
            backdiv.style.WebkitTransform = "perspective(700) rotateY(180deg)";
            frontdiv.style.MozTransform = "perspective(700) rotateY(0deg)";
            backdiv.style.MozTransform = "perspective(700) rotateY(180deg)";
            n = 1;
        }
    }
</script>
</html>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:css3 3d翻牌效果

评论(0)Web开发网
阅读(414)喜欢(0)HTML/CSS兼容/XML