标签：
最近学习一个在线小项目，用JS+css3实现图片画廊的效果，具体效果可以点击以下链接查看：
http://1.danielcv.sinaapp.com/
案例中主要用到一些新的CSS3效果比如：
1、3D视图位置设置和子元素3D支持
-webkit-perspective:800px;/*若设置为0px则不支持3D透视功能*/ -webkit-transform-style:preserve-3d;
2、翻转为不可见时隐藏
-webkit-backface-visibility:hidden;
3、使用CSS旋转和进行位移
-webkit-transfrom:translate(0px,0px) rotateY(0deg);
4、CSS过渡动画
-webkit-transition:-webkit-transform 0.6s ease-in-out (delay);
另外用到的一些前端JS技巧：
1、字符串替换的简易模版功能
1.1、
template.replace(‘{{index}}‘,s).replace(‘{{img}}‘,data[s].img).replace(‘{{caption}}‘,data[s].caption).replace(‘{{desc}}‘,data[s].desc);
1.2、
.className.replace(/\s*photo_center\s*/,‘ ‘);
2、根据范围获得一个随机数
function random(range){ var max=Math.max(range[0],range[1]); var min=Math.min(range[0],range[1]); var diff=max-min; var number=Math.ceil(Math.random()*diff+min); return number; }
3、使用脚本设置元素的ClassName以及具体的style属性样式
.style[‘-webkit-transform‘]=‘rotate(0deg) scale(1.3)‘;
标签：
原文地址：http://www.cnblogs.com/danielweb/p/4714736.html
