这是一款效果非常炫酷的jQuery和CSS3 3d翻转图片幻灯片插件。这个幻灯片插件开始的时候图片都堆叠在一起，当用户点击了其中的某张图片后，该图片会以3D翻转的方式“飞”到堆叠图片的最前面。在该幻灯片插件中使用了 CSS3 transition、CSS3 animations 和 CSS3 transforms，并用jQuery来处理鼠标点击事件。
插件中精美的插图来自于花瓣。
插件制作
插件设计
该幻灯片插件以堆叠栈的方式来排列图片，所有的图片都会以平滑的方式定位在堆叠栈的指定位置，如下图所示：
当用户点击了其中的某张图片，该图片先移动到左边，然后在3D翻转到栈的顶部：
HTML结构
该图片3D翻转幻灯片的HTML结构非常简单，需要两个
来分别包裹图片和它们的描述。分别给这两个 设置class 为 itemlist和 itemdescription。
Where is the wind
Tell a story
幻灯片中每一张图片都有一个id属性和图片描述的data-for属性相对应。
CSS样式
因为该幻灯片插件使用的是栈结构，需要将图片absolute定位，并使用left属性来保证每张图片都可见。同时为了美观，还使用了transform scale。
#itemdescription {
position: relative;
width: 400px;
margin: 0 auto;
left: 6em;
top: 2em;
}
#itemdescription span {
display: none;
}
#itemlist {
display: block;
width: 400px;
margin: 3em auto;
position: relative;
transform-style: preserve-3d;
}
#itemlist img {
position: absolute;
cursor: pointer;
left: 0;
box-shadow: 0px 15px 50px rgba(0,0,0,0.4);
}
#itemlist img:hover {
top: -5px;
}
#itemlist img.item-0 {
z-index: 4;
transform: scale(1);
}
#itemlist img.item-1 {
z-index: 3;
left: -80px;
transform: scale(0.9);
}
#itemlist img.item-2 {
z-index: 2;
left: -160px;
transform: scale(0.8);
}
#itemlist img.item-3 {
z-index: 1;
left: -240px;
transform: scale(0.7);
}
在幻灯片的每张图片上都需要一个transition属性来使图片平滑的过渡，插件中使用一个单独的class .transition。为了制作动画效果，插件中还使用了.show class，这个class通过关键帧来使图片执行翻转动画。
.transition {
transition: 0.5s ease-out;
}
.show {
animation: show 1s linear;
}
@keyframes show{
25% {
left: -450px;
}
50% {
z-index: 5;
left: -500px;
transform: rotate3d(0,1,0,0deg);
}
70% {
z-index: 5;
left: -250px;
transform: rotate3d(0,1,0,180deg);
}
100% {
z-index: 5;
left: 0px;
transform: rotate3d(0,1,0,360deg);
}
}
经过上面的处理，可以得到下图的效果：
jQuery代码
首先要做的是遍历图像列表自动排序,插件中基于DOM元素的顺序将图片都添加到item对象中，并隐藏所有的图片描述，只显示第一幅图片的描述。
//Initiliaze
var itemList, item, className, thisItem, newOrder, itemDesc, desc;
itemList= $('#itemlist');
item= itemList.children('img');
itemDesc= $('#itemdescription');
desc= itemDesc.children('span');
//Add class name for each item
item.each(function(index) {
className= 'item-' + index;
$(this).addClass(className).attr('data-order', index);
});
//Show first item description
desc.filter(':first-child').fadeIn();
当幻灯片图片被点击后，该图片将会被添加 class .show来使该图片执行相应的动画。当动画结束，将显示该图片的描述，并改变它的排序data-order属性：
//On clicked fire animation
item.on('click', function() {
thisItem= $(this);
thisOrder = parseInt(thisItem.attr('data-order')) - 1;
thisItem.addClass('show');
//Reorder item position
item.on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function() {
thisItem.removeClass().addClass('item-0').attr('data-order', '0');
//Show selected item description
desc.hide();
desc.filter('[data-for=' + thisItem.attr('id') + ']' ).fadeIn('fast');
});
在幻灯片被点击图片动画的时候，插件会移动它后面的图片，改变它们的排列顺序。同时为它们添加transition属性来使它们平滑动画，最后，动画结束时将移除transition属性。
//Move siblings items backward
window.setTimeout(function () {
for(var i = thisOrder; i >= 0; i--) {
//Reorder item position
movedItem = item.filter('[data-order=' + i + ']');
newOrder= parseInt(movedItem.attr('data-order')) + 1;
className = 'item-' + newOrder;
//Move them with transition
movedItem.removeClass().addClass('transition ' + className).attr('data-order', newOrder);
//Remove their transition
item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() {
item.removeClass('transition');
});
}
}, 500);
如果觉得《html中的story图片效果 jQuery和CSS3炫酷3d翻转图片幻灯片插件》对你有帮助，请点赞、收藏，并留下你的观点哦！
