广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~
移动端全景装修图的实现实例分享
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width,user-scalable=no" /><meta charset="UTF-8"><title>Document</title><style type="text/css">body,html {margin: 0;height: 100%;overflow: hidden;position: relative;}.wrap {position: relative;height: 100%;}.view,.boxZ,.box {position: absolute;left: 50%;top: 50%;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}.box {-webkit-transform: rotateY(0deg);transform: rotateY(0deg);-webkit-animation: 36s rotate infinite linear;animation: 36s rotate infinite linear;}.box span {position: absolute;left: 50%;top: 50%;margin: -512px 0 0 -512px;width: 1024px;height: 1024px;text-align: center;-webkit-backface-visibility: hidden;backface-visibility: hidden;/*背面，角度和父级的角度相对的面是背景*/}.box span:nth-of-type(1) {-webkit-transform: rotateY(0deg) translateZ(-510px);transform: rotateY(0deg) translateZ(-511px);background: url(img/neg-x.png) no-repeat;}.box span:nth-of-type(2) {-webkit-transform: rotateY(90deg) translateZ(-511px);transform: rotateY(90deg) translateZ(-511px);background: url(img/neg-z.png) no-repeat;}.box span:nth-of-type(3) {-webkit-transform: rotateY(180deg) translateZ(-511px);transform: rotateY(180deg) translateZ(-511px);background: url(img/pos-x.png) no-repeat;}.box span:nth-of-type(4) {background: url(img/pos-z.png) no-repeat;-webkit-transform: rotateY(270deg) translateZ(-511px);transform: rotateY(270deg) translateZ(-511px);}.box span:nth-of-type(5) {background: url(img/pos-y.png);-webkit-transform: rotateX(-90deg) translateZ(-511px);transform: rotateX(-90deg) translateZ(-511px);}.box span:nth-of-type(6) {background: url(img/neg-y.png);-webkit-transform: rotateX(90deg) translateZ(-511px);transform: rotateX(90deg) translateZ(-511px);}/*transform-origin z轴的设置，在ios下有兼容问题*/#loading {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 10;background: #fff url(img/loading.gif) no-repeat center center;}</style></head><body><div id="loading"></div><script type="text/javascript">/* 检测图片加载完成 */(function(){var imgData = ["img/neg-x.png","img/neg-y.png","img/neg-z.png","img/pos-x.png","img/pos-y.png","img/pos-z.png"];var nub = 0;for(var i = 0; i < imgData.length; i++){load(imgData[i]);}function load(url){var img = new Image();img.onload = function(){nub++;if(nub == imgData.length){loading.style.display = "none";}};img.src = url;}})();</script><div class="wrap"><div class="view"><div class="boxZ"><div class="box"><span></span><span></span><span></span><span></span><span></span><span></span></div></div></div></div><script type="text/javascript" src="js/m.touch.js?1.1.11"></script><script type="text/javascript">(function(){setPerspective();window.addEventListener('resize', function(e) {setPerspective();});function setPerspective(){var wrap = document.querySelector('.wrap');var view = document.querySelector('.view');var boxZ = document.querySelector('.boxZ');var deg = 45;//视野夹角(角度越小，看到的范围越广，角度越大，看到的范围越少);var Z = Math.round(Math.tan(deg*Math.PI/180)*wrap.clientHeight/2);//计算景深wrap.style.perspective = wrap.style.WebKitPerspective = Z + "px"; //距离景物距离不变，那看到的画面大小就不变css(view,"translateZ",Z);css(boxZ,"translateZ",-100);}})();(function(){var box = document.querySelector('.box');css(box,"rotateX",0);css(box,"rotateY",0);window.addEventListener('deviceorientation', function(e) {var x = e.beta;var y = e.gamma;var z = e.alpha;var rotateX = x - 90;var rotateY = (y + z)%360;if(rotateX > 60){rotateX = 60;} else if(rotateX <-60){rotateX = -60;}css(box,"rotateX",rotateX);css(box,"rotateY",-rotateY);});})();//</script></body></html>登录后复制以上就是移动端全景装修图的实现实例分享的详细内容，更多请关注9543建站博客其它相关文章！
发表评论