你的格式太差了

你没理解透，其实js部分算法不复杂，慢慢推可以推出来。

你是不是 css3的东西不熟悉？

就是一个模板插入一个变量的意思

是一个空的对象吧

替换的时候多加了  '   '   了

图片界面样式，

.photo-front .photo-wrap .side-front{

-webkit-transform: rotateY(360deg);

}

.photo-front .photo-wrap .side-back{

-webkit-transform: rotateY(180deg);

}

描述界面样式

.photo-back .photo-wrap .side-front{

-webkit-transform: rotateY(180deg);

}

.photo-back .photo-wrap .side-back{

-webkit-transform: rotateY(0deg);

}

通过点击含有photo这个类的标签 动态来回添加.photo-front和.photo-back

jq代码

$(".photo").click(function(){

if($(this).hasClass("photo-front")==true){

$(this).removeClass("photo-front");

$(this).addClass("photo-back");

}else{

$(this).addClass("photo-front");

$(this).removeClass("photo-back");

}

})

你就把下载的图片和你的这个HTML文件在同一文件夹下，<img src="图片名" />就行了

我这里提供一个方法，

如果要实现均匀分布，这里不能用random（）随机获得的数字来给每个元素的旋转角度赋值（圆形分布），也不需要分左右两部分了。假定你有x个元素要均匀分布，那么每两个元素之间的夹角就是180/x，然后用for in方法遍历，

for (n in imgs){

       var img = imgs[n];

       var x = imgs.length; 

       (function (deg){

           var index = n;     //获得索引值      

           img.style['transform'] = 'rotate('+-index*360/x+'deg) scale(.7) translateY(-1000px)';

       })(n);

这里用了立即调用函数的方法来旋转每个元素，如果直接写 img.style['transform']的话，n的值在循环完成之后会赋值给所有的元素的rotate，导致全部重叠（这里应该还有其他的方法解决这个问题但我还没想到）。

这样就到均匀分布了，但有一个问题是   点击元素时并不一定会全部重新排列位置。

//前端新手，欢迎指正。。

肯定一片黑，

.photo_front .photo-wrap{

       transform: rotateY(0deg);

   }

   .photo_back .photo-wrap{

      transform: rotateY(180deg);

   }

理解一下

<div class='photo-wrap'>

<div class='div1'>正面</div>

<div class='div2'>反面</div>

</div>

现在是需要把photo-wrap下的div1和div2进行翻转，简单理解就是翻过去div1之后把div2展示出来。翻过去div2之后把div1展示出来。

你直接把photo-wrap翻转过去肯定什么都没有，就是一片黑。

你把手机放桌子上，翻过去手机是背面，再翻过来是正面。你要是把桌子翻过去还能看到手机吗？

.photo_front .photo-wrap .div1{//正面在上时 div1的样式

       transform: rotateY(0deg);

   }

.photo_front .photo-wrap .div2{//正面在上时 div2的样式

       transform: rotateY(180deg);

   }

   .photo_back .photo-wrap .div1{//反面在上时 div1的样式

      transform: rotateY(180deg);

   }

   .photo_back .photo-wrap .div2{//反面在上时 div2的样式

      transform: rotateY(360deg);

   }

http://www.17sucai.com/preview/1/2014-12-23/ScatteredPolaroidsGallery/index.html

看最后面一段，就是效果，然后拉网，就有源码

只是刚好等于图片的宽，为了好看，可自行修改

i_back？  这是按钮

吧，你说的情况应该是图片的背面back问题。

可以在判断点击是是否是包含photo_center类的标签，如果是包含，那肯定是点击中间图片，正常正反面切换。

如果不包含，你可以写个循环，把所有的photo中的photo-back类变成photo-front之后再去执行图片的重新排序

if(/photo_center/.test(cls)){					if(/photo-front/.test(cls)){						elem.className=cls.replace(/photo-front/,'photo-back');						g("#nav_"+index).className+=' i_back';					}else{						elem.className=cls.replace(/photo-back/,'photo-front');						g("#nav_"+index).className=g("#nav_"+index).className.replace(/i_back/,' ');					}				}else{					for(var i=0;i<data.length;i++){						g("#photo_"+i).className=cls.replace(/photo-back/,'photo-front');//全部更换					}					paixu(index);//比如这是排序函数				}

变量s只在自身循环方法中起作用，不会影响

刚才又试了一下其他浏览器，发现如果用IE浏览器的话，效果和老师视频里的效果是一样的。side-back会以翻转了180度的姿态覆盖在side-front上。但是在chrome下就是我们遇到问题的样子。背后的机制是什么我讲不出来，但是可以肯定你我的代码没问题，是浏览器内核渲染时候的差别问题。

主要还是语义，一个是容器一个是段落。其次两个的默认样式好像是不一样的

这样鼠标就不会在屏幕上划词了

因为是画廊，所以一定会大量点击，点击次数多了很容易划住某些字，为了防止这种情况发生添加了onselectstart="return false"

防止可透视

你的 html 里边的 <img src="test.jpg"> 这里。

视频中的老师的文件夹里有这个图片，而你的没有，除非你自己找一个图片，在同级文件夹中放置，且名称设置为test.jpg

源码贴出来看一下