铁雪资源网 Design By www.gsvan.com
本文实例讲述了原生JS实现逼真的图片3D旋转效果。分享给大家供大家参考，具体如下：
实现效果:
实现过程:
步骤一:先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用html创建).
<body><div class="box"> <img src="/UploadFiles/2021-04-02/1.jpg">步骤二:给盒子和图片,设置对应的样式
<style> *{ margin: 0; padding: 0; } body { background-color: #000; /*overflow: hidden;*/ } #box{ width:133px; height: 200px; margin: 200px auto; position:relative; border: 1px solid #fff; transform-style: preserve-3d; /*2.transform–style属性指定嵌套元素是在三维空间中呈现。(使用此属性必须先使用transform 属性)*/ /*perspective:800px;*/ /*3.设置透视距离*/ transform:perspective(800px) rotateX(-15deg) rotateY(0deg) ; deg); } #box img{ position: absolute; top:0; left: 0; width: 100%; height: 100%; border-radius: 3px; box-shadow: 0px 0px 5px #fff; /*4.设置图片阴影*/ /*-webkit-box-reflect: below 15px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);*/ /*-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);*/ -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6)); /*5.设置图片倒影:直接记住吧(3个值。1. direction 定义方向，取值包括 above 、 below 、 left 、 right。);2. offset定义反射偏移的距离;3.mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。*/ } </style>第三步:js
<script> // //js动态添加11个img标签 // //创建11个img标签的办法 // var box=document.getElementById('box'); // for(var i=1;i<=11;i++){//有多少张图就循环多少次 // var imgs= document.createElement('img'); // imgs.setAttribute("src", "img/"+i+".jpg"); // box.appendChild(imgs);} //当页面加载完毕后再执行代码 window.onload=function ( ) { //1.获取元素 var oWrap=document.getElementById('box'); var oImg=oWrap.children; // var oImgLen=oImg.length; var deg=360/oImg.length;//3.每个需要旋转的度数 // 定义一个开始的度数 var roX=-10; var roY=0; var x,y,x_,y_,xN,yN,time=null; //2.遍历所有的img标签 for(var i=0;i<oImg.length;i++){ // oImg[i].style.cssText='transform:rotateY('+i*deg+'deg ) translateZ(350px);transition:1s'+ (oImgLen-i)*0.1 +'s;'; oImg[i].style.transform = 'rotateY('+ i*deg + 'deg) translateZ(350px)'; oImg[i].style.transition ='all 1s '+ (oImg.length-i-1)*0.1 +'s'; //transition:设置过渡 oImg[i].ondragstart=function ( ) { return false; } } //3.事件处理 document.onmousedown=function ( e ) { clearInterval(time); e=e||window.event; x_=e.clientX; y_=e.clientY; // console.log ( "鼠标按下了" ) this.onmousemove=function ( e ) { e=e||window.event; //获取滚动的X和Y轴 //client:鼠标触发点相对于页面可视区域左上角距离 x=e.clientX; y=e.clientY; //两点之间的差值:第一次走的时候两值相等,第二次走的时候x已经更新,但x_没更新,所以两个差值就是xN; xN=x-x_; yN=y-y_; //差值拼接到旋转的Y里面去 roY+=xN*0.2;//水平拖影响Y轴; roX-=yN*0.2; oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'; // var oDiv =document.createElement('div'); // this.body.appendChild(oDiv); // oDiv.style.cssText='width:5px;height:5px; background:red;position:absolute;left:'+x+"px;top:"+y+"px"; x_=e.clientX; y_=e.clientY; } this.onmouseup=function ( ) { // console.log ( "鼠标抬起了" ) this.onmousemove= null; //设置一个定时器,实现后面惯性效果8 time=setInterval(function ( ) { //无限乘以零点95它会接近0的状态 xN*=0.95; yN*=0.95; //当它小到0.1时停止计时器 if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回绝对值 clearInterval(time); } //差值拼接到旋转的Y里面去 roY+=xN*0.2;//水平拖影响Y轴; roX-=yN*0.2; oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'; },30) } } } </script>附件:完整版代码
<!DOCTYPE html > <html lang="en" onselectstart="return false;"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } body { background-color: #000; } #box{ width:133px; height: 200px; margin: 100px auto; position:relative; /* border: 1px solid #fff; 测试用到*/ transform-style: preserve-3d; /*2.transform–style属性指定嵌套元素是在三维空间中呈现。(使用此属性必须先使用transform 属性)*/ /*perspective:800px;*/ /*3.设置透视距离*/ transform:perspective(800px) rotateX(-15deg) rotateY(0deg) ; } #box img{ position: absolute; top:0; left: 0; width: 100%; height: 100%; border-radius: 3px; box-shadow: 0px 0px 5px #fff; /*4.设置图片阴影*/ -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6)); /*方法2-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);*/ /*5.设置图片倒影:直接记住吧(3个值。1. direction 定义方向，取值包括 above 、 below 、 left 、 right。);2. offset定义反射偏移的距离;3.mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。*/ } </style> </head> <body> <div id="box"> <img src="/UploadFiles/2021-04-02/1.jpg">更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》、《JavaScript页面元素操作技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
标签：
JS,图片,3D旋转
铁雪资源网 Design By www.gsvan.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无原生JS实现逼真的图片3D旋转效果详解的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。