codetc - 网站亚洲伟德官网 首页 代码 CSS 查看内容

伟德官网下载地址JS与CSS3的翻转实现3D翻牌效果

2015-1-21 22:15| 发布者: CODETC| 查看: 15653| 评论: 0

之前我们有讨论过伟德官网下载地址CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果。
纸牌正面 纸牌背面
这里我们需要伟德官网下载地址flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角,需要在父级元素上添加类名viewport-flip或者直接添加如下CSS:
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective的中文意思是:透视,视角!该属性的存在与否决定了你所看到的是2次元的还是3次元的,也就是是2D transform还是3D transform. 这不难理解,没有透视,不成3D。

原理简述
  • 当前在前显示的元素翻转90度后隐藏, 动画时间225毫秒
  • 225毫秒结束后,之前显示在后面的元素逆向90度翻转显示在前
  • 完成翻面效果

  • 也就是纸牌的前后面在两个不同的时间点进行flip效果,构成完整的纸牌翻面效果。
    注:Chrome浏览器下需要让元素屏幕垂直居中,以保证元素均在视角内,避免部分区域不显示的情况发生。

    以下是具体实现代码:


    HTML代码
    <div id="box" class="box viewport-flip" title="点击翻面">
    	<a href="/" class="list flip out"><img src="http://www.codetc.com/element/puke-k.png" alt="纸牌正面" /></a>
    	<a href="/" class="list flip"><img src="http://www.codetc.com/element/puke-back.png" alt="纸牌背面" /></a>
    </div>

    CSS代码

    <style type="text/css">
    .in {
    	-webkit-animation-timing-function: ease-out;
    	-webkit-animation-duration: 350ms;
    	animation-timing-function: ease-out;
    	animation-duration: 350ms;
    }
    .out {
    	-webkit-animation-timing-function: ease-in;
    	-webkit-animation-duration: 225ms;
    	animation-timing-function: ease-in;
    	animation-duration: 225ms;
    }
    .viewport-flip {
    	-webkit-perspective: 1000px;
    	perspective: 1000px;
    	position: absolute;
    }
    .flip {
    	-webkit-backface-visibility: hidden;
    	-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
    	backface-visibility: hidden;
    	transform: translateX(0);
    }
    .flip.out {
    	-webkit-transform: rotateY(-90deg) scale(.9);
    	-webkit-animation-name: flipouttoleft;
    	-webkit-animation-duration: 175ms;
    	transform: rotateY(-90deg) scale(.9);
    	animation-name: flipouttoleft;
    	animation-duration: 175ms;
    }
    .flip.in {
    	-webkit-animation-name: flipintoright;
    	-webkit-animation-duration: 225ms;
    	animation-name: flipintoright;
    	animation-duration: 225ms;
    }
    @-webkit-keyframes flipouttoleft {
        from { -webkit-transform: rotateY(0); }
        to { -webkit-transform: rotateY(-90deg) scale(.9); }
    }
    @keyframes flipouttoleft {
        from { transform: rotateY(0); }
        to { transform: rotateY(-90deg) scale(.9); }
    }
    @-webkit-keyframes flipintoright {
        from { -webkit-transform: rotateY(90deg) scale(.9); }
        to { -webkit-transform: rotateY(0); }
    }
    @keyframes flipintoright {
        from { transform: rotateY(90deg) scale(.9); }
        to { transform: rotateY(0); }
    }
    .box {
        width: 200px;
        height: 282px;
        padding-top: 30px;
        padding-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    .list {
        position: absolute;
    }
    </style>
    上述代码中flipintoright和flipouttoleft可根据需要自己定义牌的翻转方向(由左至右 or 由右至左)

    JavaScript代码(需要Jquery库)
    <script type="text/javascript">
    // 在前面显示的元素,隐藏在后面的元素
    var eleBack = null, eleFront = null,
        // 纸牌元素们 
        eleList = $(".list");
    
    // 确定前面与后面元素
    var funBackOrFront = function() {
        eleList.each(function() {
            if ($(this).hasClass("out")) {
                eleBack = $(this);
            } else {
                eleFront = $(this);
            }
        });
    };
    funBackOrFront();
    
    $("#box").bind("click", function() {
        // 切换的顺序如下
        // 1. 当前在前显示的元素翻转90度隐藏, 动画时间225毫秒
        // 2. 结束后,之前显示在后面的元素逆向90度翻转显示在前
        // 3. 完成翻面效果
        eleFront.addClass("out").removeClass("in");
        setTimeout(function() {
            eleBack.addClass("in").removeClass("out");
            // 重新确定正反元素
            funBackOrFront();
        }, 225);
        return false;
    });
    </script>
    文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-125-1.html

    最新评论

     作为游客发表评论,请输入您的昵称

    返回顶部