css3卡牌炫酷3d排列展示_14种炫酷堆叠卡片切换动画特效
这是一组非常有创意的堆叠卡片切换动画特效。这些堆叠卡片切换效果通过点击“确定”或“取消”按钮，以不同的方式将最上面的卡片切换到底部。这14最后卡片切换动画创意十足，效果非常炫酷。
使用方法
HTML结构
在第一种效果中，它的HTML结构如下：
- 元素中的图片将被制作为一个堆栈结构，所有图片以绝对定位的方式互相堆叠在一起。div.controls是两个控制按钮。当点击“Accept”或“Reject”按钮的时候，当前图片堆栈顶部的图片会被添加accept或reject class。
Reject
Accept
JavaScript
对于这个例子中，main.js文件中提供了一些函数来实现各种功能。动画的实现使用的是dynamics.js动画库。而移动卡片的动画则是通过CSS3动画来实现的。
插件有一些的一些参数选项：
Stack.prototype.options = {
// stack的透视值
perspective: 1000,
// stack的透视原点
perspectiveOrigin : '50% -50%',
// stack的可见项目数量
visible : 3,
// 无限循环
infinite : true,
// callback: 当到达栈顶时触发
onEndStack : function() {return false;},
// animation settings for the items' movements in the stack when the items rearrange
// object that is passed to the dynamicsjs animate function (see more at http://dynamicsjs.com/)
// example:
// {type: dynamics.spring,duration: 1641,frequency: 557,friction: 459,anticipationSize: 206,anticipationStrength: 392}
stackItemsAnimation : {
duration : 500,
type : dynamics.bezier,
points : [{'x':0,'y':0,'cp':[{'x':0.25,'y':0.1}]},{'x':1,'y':1,'cp':[{'x':0.25,'y':1}]}]
},
// delay for the items' rearrangement / delay before stackItemsAnimation is applied
stackItemsAnimationDelay : 0,
// animation settings for the items' movements in the stack before the rearrangement
// we can set up different settings depending on whether we are approving or rejecting an item
stackItemsPreAnimation : {
reject : {
// if true, then the settings.properties parameter will be distributed through the items in a non equal fashion
// for instance, if we set settings.properties = {translateX:100} and we have options.visible = 4,
// then the second item in the stack will translate 100px, the second one 75px and the third 50px
elastic : true,
// object that is passed into the dynamicsjs animate function - second parameter - (see more at http://dynamicsjs.com/)
animationProperties : {},
// object that is passed into the dynamicsjs animate function - third parameter - (see more at http://dynamicsjs.com/)
animationSettings : {}
},
accept : {
// if true, then the settings.properties parameter will be distributed through the items in a non equal fashion
// for instance, if we set settings.properties = {translateX:100} and we have options.visible = 4,
// then the second item on the stack will translate 100px, the second one 75px and the third 50px
elastic : true,
// object that is passed into the dynamicsjs animate function - second parameter - (see more at http://dynamicsjs.com/)
animationProperties : {},
// object that is passed into the dynamicsjs animate function (see more at http://dynamicsjs.com/)
animationSettings : {}
}
}
}
对于这个例子中使用的CSS3动画代码如下：
/******************** yuda *********************/
.stack--yuda .stack__item--reject {
-webkit-animation: yudaReject 0.5s forwards;
animation: yudaReject 0.5s forwards;
}
@-webkit-keyframes yudaReject {
to {
opacity: 0;
-webkit-transform: translate3d(0, 200px, 0);
transform: translate3d(0, 200px, 0);
}
}
@keyframes yudaReject {
to {
opacity: 0;
-webkit-transform: translate3d(0, 200px, 0);
transform: translate3d(0, 200px, 0);
}
}
.stack--yuda .stack__item--accept {
-webkit-transform-origin: 50% 300%;
transform-origin: 50% 300%;
-webkit-animation: yudaAccept 0.5s forwards;
animation: yudaAccept 0.5s forwards;
}
@-webkit-keyframes yudaAccept {
to {
opacity: 0;
-webkit-transform: rotate3d(0, 0, 1, 20deg);
transform: rotate3d(0, 0, 1, 20deg);
}
}
@keyframes yudaAccept {
to {
opacity: 0;
-webkit-transform: rotate3d(0, 0, 1, 20deg);
transform: rotate3d(0, 0, 1, 20deg);
}
}
其它例子的实现代码请参考下载文件。