<! DOCTYPE html>
<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;
/*
Back, angle relative to the angle of the parent is the background
*/
}
. 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-axis settings, compatibility issues under 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>
<body>
<div id= "Loading" ></div>
<script type= "Text/javascript" >
/* Test Picture loading complete */
(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" ></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;//angle of view (the smaller the angle, the wider the range, the greater the angle, the less the scope to see);
var Z = Math.Round (Math.tan (deg*math.pi/180) *WRAP.CLIENTHEIGHT/2);//Calculate depth of field
wrap.style.perspective = Wrap.style.WebKitPerspective = Z + "px";
The distance from the scene is constant, the size of the picture will not change
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);
});
})();
http://antario.act.qq.com/
</script>
</body>
Every day a JS small demo mobile panorama scene implementation-Panorama decoration map. Main points of knowledge: CSS3, rotation angle detection