JavaScript

超轻量级php框架startmvc

首页 JavaScript 原生JS实现逼真的图片3D旋转效果详解

原生JS实现逼真的图片3D旋转效果详解

更新时间：2020-08-15 07:36:01 作者：startmvc
本文实例讲述了原生JS实现逼真的图片3D旋转效果。分享给大家供大家参考，具体如下：实

本文实例讲述了原生JS实现逼真的图片3D旋转效果。分享给大家供大家参考，具体如下：

实现效果:

实现过程:

步骤一:先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用html创建).


<body><div class="box">
 <img src="./img/1.jpg" alt="">
 <img src="./img/2.jpg" alt="">
 <img src="./img/3.jpg" alt="">
 <img src="./img/4.jpg" alt="">
 <img src="./img/5.jpg" alt="">
 <img src="./img/6.jpg" alt="">
 <img src="./img/7.jpg" alt="">
 <img src="./img/8.jpg" alt="">
 <img src="./img/9.jpg" alt="">
 <img src="./img/10.jpg" alt="">
 <img src="./img/11.jpg" alt="">
 <img src="./img/12.jpg" alt="">
</div>

步骤二:给盒子和图片,设置对应的样式


 <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="./img/1.jpg" >
 <img src="./img/2.jpg" >
 <img src="./img/3.jpg" >
 <img src="./img/4.jpg" >
 <img src="./img/5.jpg" >
 <img src="./img/6.jpg" >
 <img src="./img/7.jpg" >
 <img src="./img/8.jpg" >
 <img src="./img/9.jpg" >
 <img src="./img/10.jpg" >
 <img src="./img/11.jpg" >
 <img src="./img/12.jpg" >
</div>
 <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>
</body>
</html>
JS 图片 3D旋转
文章分类
相关文章

微信小程序如何实现点击图片放大功能

微信小程序图片自适应实现解析

TensorFLow 不同大小图片的TFrecords存取实例

python通过opencv实现图片裁剪原理解析

python opencv如何实现图片绘制

JS图片懒加载的优点及实现原理

Pytorch自己加载单通道图片用作数据集训练的实例

pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换

Python如何读取文件中图片格式

如何基于JavaScript判断图片是否加载完成

使用PyTorch将文件夹下的图片分为训练集和验证集实例

pytorch下大型数据集(大型图片)的导入方式

python将图片转base64,实现前端显示

python 解决flask 图片在线浏览或者直接下载的问题

JS实现压缩上传图片base64长度功能

vue的三种图片引入方式代码实例

如何基于原生javaScript生成带图片的二维码

vue实现修改图片后实时更新

vue data引入本地图片的两种方式小结

使用python 对验证码图片进行降噪处理