.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(.0);
-webkit-animation-name:flipouttoleft;
-webkit-animation-duration:175ms;
transform:rotateY(-90deg)scale(.0);
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;
padding-top:40px;
padding-bottom:30px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.list{
position:absolute;
}
js部分
$(".navigation").click(function() {
$(".navigationTxt,.detectClose,.detectTriangle").fadeIn();
})
$(".detectClose").click(function() {
$(".navigationTxt,.detectClose,.detectTriangle").fadeOut();
})
//在前面顯示的元素，隱藏在后面的元素
vareleBack=null,eleFront=null,
//紙牌元素們
eleList=$(".list");
//確定前面與后面元素
varfunBackOrFront=function() {
eleList.each(function() {
if($(this).hasClass("out")) {
eleBack=$(this);
}else{
eleFront=$(this);
}
});
};
funBackOrFront();
$("#box").bind("click",function() {
//切換的順序如下
// 1.當前在前顯示的元素翻轉(zhuǎn)90度隱藏,動畫時間225毫秒
// 2.結(jié)束后，之前顯示在后面的元素逆向90度翻轉(zhuǎn)顯示在前
// 3.完成翻面效果
eleFront.addClass("out").removeClass("in");
setTimeout(function() {
eleBack.addClass("in").removeClass("out");
//重新確定正反元素
funBackOrFront();
},225);
return false;
});
