本文介绍如何利用jQuery与easing插件，结合CSS3的3D变换属性，实现一个动态照片墙效果。通过控制图片的淡入淡出、旋转及缩放，展示从左侧切入并整齐排列的流畅动画。
3D照片墙动画效果概述
该示例展示了一种动态照片墙效果，多张图片通过淡入淡出、旋转、缩放、倾斜以及3D变换等动画组合，从左侧快速切入，经过3D旋转处理后，最终在墙面上整齐排列，呈现出极具视觉冲击力的展示效果。
查看演示 下载源码
HTML结构
HTML结构与依赖引入
本实例基于jQuery库和easing插件实现，因此代码开头需首先引入这两个必要的JS文件。
<script src="jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script> 随后，在页面中需要展示照片墙的区域添加相应的HTML容器代码。
<div class="grid"></div>
<div class="animate">点击看效果</div> CSS样式定义
CSS样式定义
CSS部分负责定义照片墙的基础布局、图片排列方式以及交互按钮的样式。
.grid {
width: 600px; height: 300px; margin: 100px auto 50px auto;
perspective: 500px; /*For 3d*/
}
.grid img {width: 60px; height: 60px; display: block; float: left;}
.animate {
text-transform: uppercase;
background: rgb(0, 100, 0); color: white;
padding: 10px 20px; border-radius: 5px;
cursor: pointer;margin:10px auto;width:100px;text-align:center;
}
.animate:hover {background: rgb(0, 75, 0);} JavaScript逻辑
JavaScript动画逻辑实现
首先，通过JS动态生成50张图片并插入页面，图片资源取自网络。
var images = "", count = 50;
for(var i = 1; i <= count; i++)
images += '<img src="http://thecodeplayer.com/u/uifaces/'+i+'.jpg" />';
$(".grid").append(images); 当用户点击按钮时，50张图片会执行不同程度的变形、缩放及淡出动画。待所有淡出动作完成后，触发照片墙切入动画，此时调用storm()函数。
var d = 0; //延时
var ry, tz, s; //定义转换参数
$(".animate").on("click", function(){
$("img").each(function(){
d = Math.random()*1000; //1ms to 1000ms delay
$(this).delay(d).animate({opacity: 0}, {
step: function(n){
s = 1-n; //scale - will animate from 0 to 1
$(this).css("transform", "scale("+s+")");
},
duration: 1000
})
}).promise().done(function(){
storm(); //淡出效果全部完成时调用
})
}) 自定义的storm()函数负责处理每张图片的角度旋转和Z轴位移，结合CSS3实现3D视觉，并调用easing插件提供缓冲效果，使照片墙切入过程流畅自然。
function storm(){
$("img").each(function(){
d = Math.random()*1000;
$(this).delay(d).animate({opacity: 1}, {
step: function(n){
//rotating the images on the Y axis from 360deg to 0deg
ry = (1-n)*360;
//translating the images from 1000px to 0px
tz = (1-n)*1000;
//applying the transformation
$(this).css("transform", "rotateY("+ry+"deg) translateZ("+tz+"px)");
},
duration: 3000,
easing: 'easeOutQuint'
})
})
}