js实现3D照片墙效果

2023-08-10 06:34:03 77

/*最外层样式*/ .photo_wall{ width:100%; height:600px; position:relative; background:url(../imgs/bg.jpg)no-repeatcentercenter; 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:050%; } /*正面和反面的公共样式*/ .photo.photo_side{ border-radius:6px; background:#fff; padding:26px24px; box-sizing:border-box; backface-visibility:hidden; } /*照片的正面样式*/ .photo.photo_front{ transform:rotateY(0); } .photo.photo_frontp{ width:286px; height:286px; border:2pxsolid#d8536d; overflow:hidden; display:flex; /*align-items:center;*/ } .photo.photo_frontpimg{ width:100%; align-self:center; } .photo.photo_fronth3{ width:166px; height:44px; background:#d8536d; border-radius:006px6px; margin:0auto; text-align:center; font:16px/44pxArial; color:#fff; } /*照片的反面样式*/ .photo.photo_back{ transform:rotateY(-180deg); } .photo.photo_back.desc{ font-size:14px; line-height:20px; color:#d8536d; } .photo.photo_backa{ 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:2pxsolid#d8536d; border-radius:10px; background:rgba(248,229,227,.5); text-align:center; font:22px/60pxArial; cursor:pointer; }

//用来获取元素 //用来判断某个元素是否有某个class //如果没有添加 //如果有就删除 //获取元素idclasstagall functionM(sele){ varfirst=sele.substr(0,1), isArr=sele.split('');//idclasstag if(first==="#"&&isArr.length==1){//id returndocument.getElementById(sele.substr(1)); }else{ vararr=Array.from(document.querySelectorAll(sele)); returnarr.length==1?arr[0]:arr; } } //判断某个元素是否包含某个class functionhasClass(obj,cls){ varre=newRegExp(`\\b${cls}\\b`); if(re.test(obj.className)){ returntrue; }else{ returnfalse; } } //给某个元素添加class functionaddClass(obj,cls){ if(!hasClass(obj,cls)){ obj.className+=`${cls}`;//不要忘了前面的空格哈 } obj.className=obj.className.trim();//去掉前后空格 } //给某个元素删除class functionrmClass(obj,cls){ varre=newRegExp(`\\b${cls}\\b`); if(hasClass(obj,cls)){ obj.className=obj.className.replace(re,'') .replace(/\s{2}/,'').trim();//去掉前后空格 } }

js实现3D照片墙效果

{{caption}}

热门推荐

随机推荐