Sharing of implementation examples of panoramic decoration drawings on mobile terminals-H5 Tutorial-php.cn

Sharing of implementation examples of panoramic decoration drawings on mobile terminals

零下一度

Release： 2017-07-20 15:16:58

Original

2098 people have browsed it

Sharing of implementation examples of panoramic decoration drawings on mobile terminals

<!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(&#39;resize&#39;, function(e) {
setPerspective();
});
function setPerspective(){
var wrap = document.querySelector(&#39;.wrap&#39;);
var view = document.querySelector(&#39;.view&#39;);
var boxZ = document.querySelector(&#39;.boxZ&#39;);
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(&#39;.box&#39;);
css(box,"rotateX",0);
css(box,"rotateY",0);
window.addEventListener(&#39;deviceorientation&#39;, 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>

Copy after login

The above is the detailed content of Sharing of implementation examples of panoramic decoration drawings on mobile terminals. For more information, please follow other related articles on the PHP Chinese website!