使用JS与CSS3的翻转实现3D翻牌效果

之前我们有讨论过使用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="element/puke-k.png" alt="纸牌正面" /></a>

	<a href="/" class="list flip"><img src="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

秒客网

使用JS与CSS3的翻转实现3D翻牌效果

相关文章