Partage d'exemples de mise en œuvre de dessins de décoration panoramiques sur appareils mobiles
<!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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn