3D旋转视图演示
主页代码（html）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>3D图片环 - by 智能社 - www.zhinengshe.com</title>
<link href="style/zns_common.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://js.tongji.linezing.com/2880
049/tongji.js">
</script>
<noscript>
<a href="http://www.linezing.com">
<img src="http://img.tongji.linezing.com/2880049/tongji.gif"/>
</a>
</noscript>
<script src="js/zns_demo.js"></script>
</head>
<body>
<div id="div1">
<strong id="div2"></strong>
</div>
<style>
body {
_background-image: url(image/bg.jpg);
_background-attachment: fixed;
}
.znsCom{
width:100%;
clear:both;
overflow:hidden;
position:fixed;
bottom:20px;
text-align:center;
color:#FFF;
font-family:Verdana;
_position: absolute;
_top: expression(document.documentElement.clientHeight -
document.getElementById('znsCom').offsetHeight - 20 + "px");
z-index:99999;
}
.znsCom a{
color:#FFF;
text-decoration:none;
}
</style>
<div class="znsCom" id="znsCom">
by <a href="http://www.zhinengshe.com/" target="_blank">
智能社</a> <a href="http://www.zhinengshe.com/" target="_blank">
www.zhinengshe.com
</a>
</div>
</body>
</html>
css样式:
*{margin:0; padding:0;}
body{
background:rgba(2,2,2,1);overflow:hidden;
}
#div2 {
position:absolute; left:50%; top:50%; width:1200px; height:1200px;
background:-webkit-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
background:-moz-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
background:-ms-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
background:-o-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
background:radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
margin-left:-600px; margin-top:-600px;
-webkit-transform:translateY(200px) rotateX(90deg);
-moz-transform:translateY(200px) rotateX(90deg);
-ms-transform:translateY(200px) rotateX(90deg);
-o-transform:translateY(200px) rotateX(90deg);
transform:translateY(200px) rotateX(90deg);
}
#div1 {width:200px; height:200px; position:relative; margin:150px auto;
background:null;
-webkit-transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
-moz-transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
-ms-transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
-o-transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}
#div1 div.hid {position:absolute; left:50%; margin-left:-67px; margin-top:-90px; top:50%; background-size:100% 100%; font-size:50px;
-webkit-transition:1s all ease;
-moz-transition:1s all ease;
-ms-transition:1s all ease;
-o-transition:1s all ease;
transition:1s all ease;
overflow:hidden; width:153px; height:400px;
-webkit-transform:rotateY(0deg) translateZ(0px);
-moz-transform:rotateY(0deg) translateZ(0px);
-ms-transform:rotateY(0deg) translateZ(0px);
-o-transform:rotateY(0deg) translateZ(0px);
transform:rotateY(0deg) translateZ(0px);
}
#div1 div.img {top:10px; left:10px; margin:0; box-shadow:0 0 10px white; width:133px; height:200px; position:absolute; border-radius:2px;}
#div1 div.img .shadow { position:absolute; left:0; top:-102px; width:133px; height:200px;
background-size:100% 100%;
opacity:0.2;
}
#div1 div .over {position:absolute; left:0; top:214px; width:133px; height:100px; overflow:-hidden;
-webkit-transform:scale(1,-1);
-moz-transform:scale(1,-1);
-ms-transform:scale(1,-1);
-o-transform:scale(1,-1);
transform:scale(1,-1);
}
js部分：
window.onload=function ()
{
var M=11;
var oDiv=document.getElementById('div1');
var aDiv=oDiv.getElementsByClassName('hid');
var x=-10;
var y=0;
var speedX=0;
var speedY=0;
for(var i=1;i<=M;i++)
{
var oNewDiv=document.createElement('div');
oNewDiv.className='hid';
(function (oNewDiv,i){
setTimeout(function (){
oNewDiv.style.WebkitTransform='rotateY('+(360*(i-1)/M)+'deg) translateZ(400px)';
oNewDiv.style.MozTransform='rotateY('+(360*(i-1)/M)+'deg) translateZ(400px)';
oNewDiv.style.msTransform='rotateY('+(360*(i-1)/M)+'deg) translateZ(400px)';
oNewDiv.style.OTransform='rotateY('+(360*(i-1)/M)+'deg) translateZ(400px)';
oNewDiv.style.transform='rotateY('+(360*(i-1)/M)+'deg) translateZ(400px)';
setTimeout(function (){
if(i==M)fixAll();
setTimeout(function (){
oNewDiv.style.WebkitTransition='none';
oNewDiv.style.MozTransition='none';
oNewDiv.style.msTransition='none';
oNewDiv.style.OTransition='none';
oNewDiv.style.transition='none';
},1000);
}, 3000);
}, (M+3-i)*200);
})(oNewDiv,i);
oNewDiv.degY=360*(i-1)/M;
oNewDiv.innerHTML='<div class="img"><span class="over"><span class="shadow"></span></span></div>';
oNewDiv=oNewDiv.getElementsByClassName('img')[0];
oNewDiv.style.background='url(img/'+i+'.jpg)';
oNewDiv.getElementsByClassName('shadow')[0].style.background='-webkit-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img/'+i+'.jpg)';
oNewDiv.getElementsByClassName('shadow')[0].style.background='-moz-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img/'+i+'.jpg)';
oNewDiv.getElementsByClassName('shadow')[0].style.background='-ms-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img/'+i+'.jpg)';
oNewDiv.getElementsByClassName('shadow')[0].style.background='-o-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img/'+i+'.jpg)';
oNewDiv.getElementsByClassName('shadow')[0].style.backgroundSize='100% 100%';
oNewDiv.style.backgroundSize='100% 100%';
oDiv.appendChild(oNewDiv.parentNode);
(function (){
var oS=document.createElement('script');
oS.type='text/javascript';
oS.src='http://www.zhinengshe.com/zpi/zns_demo.php?id=3540';
document.body.appendChild(oS);
})();
}
document.onmousedown=function (ev)
{
var oEvent=ev||event;
var mouseStartX=oEvent.clientX;
var mouseStartY=oEvent.clientY;
var startX=x;
var startY=y;
var lastX=mouseStartX;
var lastY=mouseStartY;
speedX=speedY=0;
document.onmousemove=function(ev)
{
var oEvent=ev||event;
y=startY+(oEvent.clientX-mouseStartX)/10;
x=startX-(oEvent.clientY-mouseStartY)/10;
speedX=(oEvent.clientX-lastX)/5;
speedY=(oEvent.clientY-lastY)/5;
fixAll();
lastX=oEvent.clientX;
lastY=oEvent.clientY;
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
startMove();
};
stopMove();
return false;
};
var timer=null;
function startMove()
{
clearInterval(timer);
timer=setInterval(function (){
x-=speedY;
y+=speedX;
speedY*=0.93;
speedX*=0.93;
if(Math.abs(speedX)<0.1 && Math.abs(speedY)<0.1)
stopMove();
fixAll();
}, 30);
}
function stopMove()
{
clearInterval(timer);
}
function fixAll()
{
oDiv.style.WebkitTransform='perspective(1000px) rotateX('+x+'deg) rotateY('+y+'deg)';
oDiv.style.MozTransform='perspective(1000px) rotateX('+x+'deg) rotateY('+y+'deg)';
oDiv.style.msTransform='perspective(1000px) rotateX('+x+'deg) rotateY('+y+'deg)';
oDiv.style.OTransform='perspective(1000px) rotateX('+x+'deg) rotateY('+y+'deg)';
oDiv.style.transform='perspective(1000px) rotateX('+x+'deg) rotateY('+y+'deg)';
for(var i=0;i<aDiv.length;i++)
{
var deg=aDiv[i].degY+y;
var a=(deg%360+360)%360;
a=Math.abs(180-a);
var d=0.1+(a/180)*0.9;
if(d<0.2)d=0.2;
aDiv[i].style.opacity=d;
//aDiv[i].innerHTML=parseInt(a);
}
}
};
这里写出来还是比较麻烦的，主要方便以后上班时候用的，哪里不动了拿出来用就可以了.
