html5立体照片墙效果,js实现3D照片墙效果

聊一下心得：CSS写得好，真的可以省很多js代码哈，写起来也简单很多，所以要好好掌握js哈，所以这里也提供了css代码，如果您觉得您的css写得不错，可以直接看js代码哦

效果：

1、点击Start View进入照片墙

2、只有一张图片是在中间显示，其他图片在中间的图片两侧随机排序，并且随机旋转一定的角度，层级也是随机的哦

3、点击上面的导航条，可以让对应的图片在中间显示

4、点击中间的图片该照片翻转，显示背面(照片的描述信息)

实现过程：

1、用数据生成结构(模拟的数据，此处不再提供)

2、对所有图片进行排序

3、计算两侧图片的随机范围

4、控制图片翻转

5、控制导航按钮切换图片

6、遮罩层动画实现

HTML代码：

{ {caption}}

{ {desc}}

{ {split}}



Start View

CSS代码：

/*最外层样式*/

.photo_wall{

width: 100%;

height: 600px;

position: relative;

background: url(../imgs/bg.jpg) no-repeat center center;

background-size: cover;

overflow: hidden;

}

/*照片区域的样式*/

.photo {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

z-index: 1;

opacity: 0;

transition: 1s;

}

/*每个照片的样式*/

.photo .photo_i,.photo .photo_3d,.photo .photo_side {

width: 336px;

height: 392px;

position: absolute;

left: 0;

top: 0;

}

.photo .photo_i {

transition: 800ms;

perspective: 750px;

left: 50%;

top: 50%;

transform: translate(-50%,-50%) scale(.5) rotate(0);

}

.photo .photo_3d {

transition: 500ms;

transform-style: preserve-3d;

transform-origin: 0 50%;

}

/*正面和反面的公共样式*/

.photo .photo_side {

border-radius: 6px;

background: #fff;

padding: 26px 24px;

box-sizing: border-box;

backface-visibility: hidden;

}

/*照片的正面样式*/

.photo .photo_front {

transform: rotateY(0);

}

.photo .photo_front p {

width: 286px;