聊一下心得：CSS写得好，真的可以省很多js代码哈，写起来也简单很多，所以要好好掌握js哈，所以这里也提供了css代码，如果您觉得您的css写得不错，可以直接看js代码哦
效果：
1、点击Start View进入照片墙
2、只有一张图片是在中间显示，其他图片在中间的图片两侧随机排序，并且随机旋转一定的角度，层级也是随机的哦
3、点击上面的导航条，可以让对应的图片在中间显示
4、点击中间的图片该照片翻转，显示背面（照片的描述信息）
实现过程：
1、用数据生成结构（模拟的数据，此处不再提供）
2、对所有图片进行排序
3、计算两侧图片的随机范围
4、控制图片翻转
5、控制导航按钮切换图片
6、遮罩层动画实现
HTML代码：
<body> <div> <div> <!-- 每张图片的最外层，用来控制图片的旋转和位移 --> <div> <!-- 内层用来控制图片的3D翻转 --> <div> <!-- 每个照片的正面 --> <div> <p><img {{src}}="{{img}}"></p> <h3>{{caption}}</h3> </div> <!-- 每个照片的反面 --> <div> <p>{{desc}}</p> </div> </div> </div> {{split}} <div><span></span></div> </div> <div> <div>Start View</div> </div> </div> </body>
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; height: 286px; border: 2px solid #d8536d; overflow: hidden; display: flex; /*align-items: center;*/ } .photo .photo_front p img{ width: 100%; align-self: center; } .photo .photo_front h3{ width: 166px; height: 44px; background: #d8536d; border-radius: 0 0 6px 6px; margin: 0 auto; text-align: center; font: 16px/44px Arial; color: #fff; } /*照片的反面样式*/ .photo .photo_back { transform: rotateY(-180deg); } .photo .photo_back .desc { font-size: 14px; line-height: 20px; color: #d8536d; } .photo .photo_back a { color: #d8356d; } /*照片的居中样式*/ .photo .center { z-index: 9999; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1) rotate(0); } /*照片正面的class*/ .photo .front .photo_3d { transform: translateX(0) rotateY(0); } /*照片反面的calss*/ .photo .back .photo_3d { transform: translateX(100%) rotateY(-180deg); } /*导航栏的样式*/ .nav { position: absolute; left: 0; top: 0; z-index: 888; width: 100%; height: 200px; padding-top: 10px; box-sizing: border-box; text-align: center; background: -webkit-linear-gradient(top,rgba(0,0,0,.5),transparent); } @font-face { font-family: "icont"; src: url(../font/iconfont.woff) format("woff"); } .nav .nav_i { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.5); font-family: "icont"; text-align: center; line-height: 30px; color: rgba(255,255,255,0); cursor: pointer; transform: scale(.5); transition: 500ms; } .nav .active { color: rgba(255,255,255,1); transform: scale(.9) rotateY(0); } .nav .back { transform: scale(.8) rotateY(-180deg); } /*遮罩层*/ .photo_wall .shade { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; background: rgba(255,255,255,.7); display: flex; justify-content: center; align-items: center; } .photo_wall .hide { transition: 1s; opacity: 0; transform: scale(0) rotateY(360deg); } .photo_wall .shade .start { width: 200px; height: 60px; border: 2px solid #d8536d; border-radius: 10px; background: rgba(248,229,227,.5); text-align: center; font: 22px/60px Arial; cursor: pointer; }
js代码：用到了我昨天在博客上写的工具函数：
// 用来获取元素 // 用来判断某个元素是否有某个class // 如果没有添加 // 如果有就删除 //获取元素id class tag all function M(sele) { var first = sele.substr(0,1), isArr = sele.split(' ');//id class tag if(first==="#"&&isArr.length==1){//id return document.getElementById(sele.substr(1)); }else{ var arr = Array.from(document.querySelectorAll(sele)); return arr.length == 1?arr[0] :arr; } } //判断某个元素是否包含某个class function hasClass(obj,cls){ var re = new RegExp(`\\b${cls}\\b`); if(re.test(obj.className)){ return true; }else{ return false; } } //给某个元素添加class function addClass(obj,cls){ if(!hasClass(obj,cls)){ obj.className += ` ${cls}`;//不要忘了前面的空格哈 } obj.className = obj.className.trim();//去掉前后空格 } //给某个元素删除class function rmClass(obj,cls){ var re = new RegExp(`\\b${cls}\\b`); if(hasClass(obj,cls)){ obj.className = obj.className.replace(re,'') .replace(/\s{2}/,' ').trim();//去掉前后空格 } }
提供主要的实现步骤的js代码：