<!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>
以上就是移动端全景装修图的实现实例分享的详细内容。