3D旋转 相册
效果展示
代码逻辑
<!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>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgeiejh
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01