3D照片翻转墙 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-family: "微软雅黑"; font-size: 12px; color: #666; } .hidden { display: none; } h1 { margin-top: 50px; text-align: center; } .wrap { width: 1200px; height: 500px; margin: 50px auto; background-color: #999; position: relative; overflow: hidden; perspective: 1000px; -webkit-perspective: 1000px; } .photo { width: 150px; height: 200px; z-index: 1; position: absolute; top: 0; left: 0; transition: all 2s; -webkit-transition: all 2s; -moz-transition: all 2s; } .photo-center { top: 50%; margin-top: -100px; left: 50%; margin-left: -75px; z-index: 999; } /*.photo-current { transform: rotateY(180deg); }*/ .photo-wrap { height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: all ease-in .5s; -webkit-transition: all ease-in .5s; -moz-transition: all ease-in .5s; } .photo-wrap:hover { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } .photo-wrap .side-common { width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; line-height: 200px; font-weight: bold; font-size: 14px; cursor: pointer; border-radius: 9px; padding: 10px; background: white; box-sizing: border-box; backface-visibility: hidden; -webkit-backface-visibility:hidden; /* Chrome 和 Safari */ -moz-backface-visibility:hidden; /* Firefox */ -ms-backface-visibility:hidden; /* Internet Explorer */ } .photo-wrap .side-front { background: white; color: black; overflow: hidden; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); } .photo-wrap .side-back { background: #ccc; color: white; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } </style> </head> <body> <h1>3D照片翻转墙</h1> <div class="wrap"></div> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> var data = [ {"src" : "images/img1.jpg", "desc" : "范冰冰"}, {"src" : "images/img2.jpg", "desc" : "Baby"}, {"src" : "images/img3.jpg", "desc" : "杨臭脚"}, {"src" : "images/img4.jpg", "desc" : "莫名美女1"}, {"src" : "images/img5.jpg", "desc" : "刘亦菲"}, {"src" : "images/img6.jpg", "desc" : "莫名美女2"}, {"src" : "images/img7.jpg", "desc" : "莫名美女3"}, {"src" : "images/img8.jpg", "desc" : "柳大胸"}, {"src" : "images/img9.jpg", "desc" : "莫名美女4"}, {"src" : "images/img10.jpg", "desc" : "奥黛丽赫本"}, {"src" : "images/img11.jpg", "desc" : "艾薇儿"}, {"src" : "images/img12.jpg", "desc" : "韩国棒子1"}, {"src" : "images/img13.jpg", "desc" : "韩国棒子2"}, {"src" : "images/img14.jpg", "desc" : "韩国棒子3"}, {"src" : "images/img15.jpg", "desc" : "中国美女1"}, {"src" : "images/img16.jpg", "desc" : "苍老师"}, {"src" : "images/img17.jpg", "desc" : "吉泽明步"}, {"src" : "images/img18.jpg", "desc" : "中国美女2"}, {"src" : "images/img19.jpg", "desc" : "羽月希"}, ]; </script> <script type="text/javascript"> var tpl = "<div class=\"photo photo-center\">" + "<div class=\"photo-wrap\">" + "<div class=\"side-front side-common\">" + "<img src=\"{{src}}\" alt=\"{{desc}}\" width=\"130\" height=\"180\">" + "</div>" + "<div class=\"side-back side-common\">{{desc}}</div>" + "</div>" + "</div>"; </script> <script type="text/javascript"> $(function() { // 得到一个介于两个数中的随机数 function rand(array) { var min = array[0]; var max = array[1]; var diff = max - min; return Math.ceil(min + Math.random() * diff); } // 记录一些常量 var constant = { box : { width : $(".wrap").outerWidth(), height : $(".wrap").outerHeight() }, photo : { width : $(".photo").outerWidth(), height : $(".photo").outerHeight() } } // 1.模板替换与dom渲染 // var photo_html = $("#tpl_photo").html(); var photo_html = tpl; $.each(data, function(index, value) { $(".wrap").append(photo_html.replace(/\{\{src\}\}/g, value.src) .replace(/\{\{desc\}\}/g, value.desc)); }); // 2.让任意一个照片居中显示 var center = rand([1, data.length]); $(".photo").eq(center).siblings('div').removeClass('photo-center'); // 3.计算左右侧图片范围 var range = { left : { x : [-constant.photo.width, Math.ceil((constant.box.width - constant.photo.width) / 2)], y : [-constant.photo.height, constant.box.height] }, right : { x : [constant.box.width / 2, constant.box.width], y : [-constant.photo.height, constant.box.height] }, angle : [0, 360] } // 4.随机在左右两侧摆放照片 function shuttlePhotos(center) { var leftPhotos = $(".photo").splice(0, center); var rightPhotos = $(".photo").splice(center + 1); $.each(leftPhotos, function(index, value) { var top = rand(range.left.y); var left = rand(range.left.x); var angle = rand(range.angle); $(value).css({ top: top, left: left, transform : "rotate("+ angle +"deg)", webkitTransform : "rotate("+ angle +"deg)", mozTransform : "rotate("+ angle +"deg)", }); }); $.each(rightPhotos, function(index, value) { var top = rand(range.right.y); var left = rand(range.right.x); var angle = rand(range.angle); $(value).css({ top: top, left: left, transform : "rotate("+ angle +"deg)", webkitTransform : "rotate("+ angle +"deg)", mozTransform : "rotate("+ angle +"deg)", }); }); } shuttlePhotos(center); // 5.给照片添加点击事件 $(".photo").on('click', function(event) { event.preventDefault(); $(this).css({ top: '50%', left: '50%', transform: 'rotate(0deg)', webkitTransform : "rotate(0deg)", mozTransform : "rotate(0deg)", }); $(this).addClass('photo-center').siblings('.photo').removeClass('photo-center'); shuttlePhotos($(this).index()); }); }) </script> </body>  </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 3D照片翻转墙