前端开发常用javascript特效_3D旋转

1500个前端开发常用javascript特效|前端开发 网页特效|3d前端开发工具

html 代码

<!Doctype html>
<html lang=”en”>
<head>
<title>前端网页开发工具</title>
<metacharset=”UTF-8″>
<metaname=”Generator” content=”EditPlus®”>
<metaname=”Author” content=””>
<metaname=”Keywords” content=””>
<metaname=”Description” content=””>
<style>
*{
margin:0;
padding:0
}
body{
background:#222;
overflow:hidden;
user-select:none;
/*禁止选中*/
}
.perspective{
perspective:800px;
/*3d景深*/
}
.wrap{
transform-style:preserve-3d;
width:120px;
height:180px;
margin:100pxauto;
position:relative;
transform:rotateX(-10deg)rotateY(0deg);
}
.wrapimg{
display:block;
position:absolute;
width:100%;
height:100%;
transform:rotateY(0deg)translateZ(0px);
padding:10px;
background:transparent;
box-shadow:004px#fff;
/*水平位移 垂直位移 扩散程度 颜色*/
border-radius:5px;
/*圆角*/
-webkit-box-reflect:below5px-webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);
/*倒影 倒影模式 直径*/
}
.wrapp{
width:1200px;
height:1200px;
background:-webkit-radial-gradient(centercenter,600px600px,rgba(122,122,122,0.5),rgba(0,0,0,0));
position:absolute;
border-radius:50%;
left:50%;
top:100%;
margin-left:-600px;
margin-top:-600px;
transform:rotateX(90deg);
/*沿着x轴方向摁倒*/
}
</style>
</head>
<body>
<divclass=’perspective’>
<divclass=’wrap’>
<imgsrc=’images/(1).png’ width=’133′ height=’200′ alt=’#’>
<imgsrc=’images/(2).jpg’ width=’133′ height=’200′ alt=’#’>
<imgsrc=’images/(3).jpg’ width=’133′ height=’200′ alt=’#’>
<imgsrc=’images/(4).jpg’ width=’133′ height=’200′ alt=’#’>
<imgsrc=’images/(5).jpg’ width=’133′ height=’200′ alt=’#’>
<imgsrc=’images/(6).jpg’ width=’133′ height=’200′ alt=’#’>
<imgsrc=’images/(7).jpg’ width=’133′ height=’200′ alt=’#’>
<imgsrc=’images/(8).jpg’ width=’133′ height=’200′ alt=’#’>
<imgsrc=’images/(9).jpg’ width=’133′ height=’200′ alt=’#’>
<imgsrc=’images/(10).jpg’ width=’133′ height=’200′ alt=’#’>
<imgsrc=’images/(11).jpg’ width=’133′ height=’200′ alt=’#’>
</div>
</div>
<script>
/*谁 触发了什么事件 谁做了什么*/
window.onload = function () { /*页面加载完成*/
/*最新的原生获取元素方法querySelectorAll*/
varoImg=document.querySelectorAll(‘img’);
varoWrap=document.querySelector(‘.wrap’);
varlastX,lastY,nowX,nowY,minusX,minusY,roY=0,
roX=-10;
vartimer=null;
/*计算每一个图片的角度 总角度(360) / 数量(11) = 单位角度*/
varlength=oImg.length;/*获取img的数量 统称为长度*/
varDeg=360/length;/*单位角度*/
for (vari=0;i<length;i++) {
oImg[i].style.transform=’rotateY(‘+i*Deg+’deg) translateZ(350px)’;
oImg[i].style.transition=’transform 1s ‘+ (length-1-i) *0.2+’s’
}
mTop();
window.onresize = mTop;
functionmTop(){
/*获取浏览器窗口可视高度*/
varwH= document.documentElement.clientHeight|| document.body.clientHeight;
oWrap.style.marginTop = (wH/2) -oWrap.offsetHeight+’px’;
}
/*拖拽drag 按下 onmousedown 移动 onmousemove 抬起 onmouseup */
document.onmousedown = function (event) { /*按下鼠标开始准备拖拽*/
event = event || window.event; /*处理兼容性*/
lastX= event.clientX;/*鼠标拖拽开始时的x坐标*/
lastY= event.clientY;/*鼠标拖拽开始时的Y坐标*/
clearInterval(timer);
document.onmousemove = function (event) {
event = event || window.event;
nowX= event.clientX;/*鼠标移动时的x坐标*/
nowY= event.clientY;/*鼠标移动时的y坐标*/
minusX=nowX-lastX;/*获取鼠标移动距离*/
minusY=nowY-lastY;/*获取鼠标移动距离*/
roY+=minusX*0.2;/*通过移动量计算旋转角度*/
roX-=minusY*0.1;/*通过移动量计算旋转角度*/
oWrap.style.transform=’rotateX(‘+roX+’deg) rotateY(‘+roY+’deg)’
lastX=nowX;/*更新初始位置保证 lastX 跟得上鼠标*/
lastY=nowY;/*更新初始位置保证 lastY */
}
document.onmouseup = function () {
document.onmousemove = null;
timer=setInterval(function(){
/*给一个摩擦系数,每一次定时器触发都慢一点点*/
minusX*=0.9;
minusY*=0.9;
roY+=minusX*0.2;/*通过移动量计算旋转角度*/
roX-=minusY*0.1;/*通过移动量计算旋转角度*/
oWrap.style.transform=’rotateX(‘+roX+’deg) rotateY(‘+roY+’deg)’;
if (Math.abs(minusX) <0.1&&Math.abs(minusY) <0.1) {
/*当移动向量过小的时候终止定时器停止惯性*/
clearInterval(timer);
}
},13);
}
returnfalse;
}
}
</script>
</body>
</html>
前端开发面试题js|web前端微信接口开发|前端开发是怎么分工的?
» 本文来自:前端开发者 » 《前端开发常用javascript特效_3D旋转》
» 本文链接地址:https://www.rokub.com/3725.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!