<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>3D旋转</title>
<style type="text/css">
*{margin:0;padding:0;}
body{
background:#222;
perspective:800px;/*景深*/
}
#wrap{
position:relative;
width:120px;
height:180px;
margin:auto;
transform-style:preserve-3d;/*设置3D环境*/
}
#wrap img{
position:absolute;
width:133px;
height:200px;
box-shadow:0 0 10px #000;
/*倒影:朝向 偏移*/
-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);
border-radius:5px;/*圆角*/
/* transform:rotateY(0deg) translateZ(0px); */
/*transition:1s 1s;动画执行的时间 动画延迟的时间*/
}
#wrap p{
position:absolute;
left:50%;
top:112%;
margin-left:-600px;
margin-top:-600px;
width:1200px;
height:1200px;
border-radius:50%;
background:-webkit-radial-gradient(center center,600px 600px,rgba(122,122,122,0.2),rgba(0,0,0,0));
transform:rotateX(90deg);
}
</style>
</head>
<body>
<div id="wrap">
<img src="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.jpg" alt="" />
<img src="images/6.jpg" alt="" />
<img src="images/7.jpg" alt="" />
<img src="images/8.jpg" alt="" />
<img src="images/9.jpg" alt="" />
<img src="images/10.jpg" alt="" />
<img src="images/11.jpg" alt="" />
<p></p>
</div>
<script type="text/javascript">
var oWrap = document.getElementById("wrap");
var aImg = oWrap.getElementsByTagName("img");
//让盒子自适应的垂直居中
function mTop(){
//获取浏览器窗口可视区域的高度
var H = document.documentElement.clientHeight;
oWrap.style.marginTop = H/2 - 180 + "px"
}
mTop();
window.onresize = mTop;
//图片初始动画
var len = aImg.length;//获取图片的个数
var Deg = 360/len;//每一张图片所占的角度
for (var i=0;i<len;i++ )
{
aImg[i].style.transform = "rotateY("+i*Deg+"deg) translateZ(350px)";
aImg[i].style.transition = "1s "+(len-1-i)*0.1+"s";
}
//鼠标事件(按下 移动 抬起) 拖拽旋转
var lastX,lastY,nowX,nowY,minX,minY,roX=0,roY=0,timer;
document.onmousedown = function(ev){
clearInterval(timer);
var ev = ev||window.event;
//获取鼠标按下去的坐标位置
lastX = ev.clientX;
lastY = ev.clientY;
this.onmousemove = function(ev){
var ev = ev||window.event;
//移动过程中鼠标的坐标位置
nowX = ev.clientX;
nowY = ev.clientY;
//计算出鼠标坐标的差值
minX = nowX - lastX;
minY = nowY - lastY;
//计算容器旋转的角度
roY += minX*0.2;//roY = roY + minX*0.2
roX -= minY*0.1;
//console.log(roX,roY);
//让整个图片容器跟随鼠标动
oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";
lastX = nowX;
lastY = nowY;
}
this.onmouseup = function(){
this.onmousemove = null;
this.onmouseup = null;
timer = setInterval(function(){
minX *=0.95;//让minX逐渐减小
minY *=0.95;
roY += minX*0.2;
roX -= minY*0.1;
oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";
//当minX达到足够小的值时 清楚定时器
if (Math.abs(minX)<0.1 && Math.abs(minY)<0.1)
{
clearInterval(timer);
}
},1000/60);
}
return false;//阻止默认事件
}
</script>
</body>
</html>
520表白html换成女朋友照片实现3D动态相册源码
35 浏览量
2024-05-27
22:44:22
上传
评论
收藏 215KB RAR 举报
520表白html实现3D动态相册，换成女朋友照片.rar （12个子文件） 
520表白html实现3D动态相册，换成女朋友照片 images 
2.jpg 33KB 10.jpg 34KB 6.jpg 40KB 1.jpg 27KB 5.jpg 33KB 8.jpg 28KB 11.jpg 36KB 3.jpg 35KB 7.jpg 37KB 9.jpg 36KB 4.jpg 33KB
3D相册.html 3KB资源评论
小正太浩二
- 粉丝: 200
- 资源: 5915
