原⽣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="">原生js和js的区别
<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 ElementById('box');
// for(var i=1;i<=11;i++){//有多少张图就循环多少次
// var imgs= ateElement('img');
// imgs.setAttribute("src", "img/"+i+".jpg");
// box.appendChild(imgs);}
/
/当页⾯加载完毕后再执⾏代码
//1.获取元素
var ElementById('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].ansform = 'rotateY('+ i*deg + 'deg) translateZ(350px)';
oImg[i].ansition ='all 1s '+ (oImg.length-i-1)*0.1 +'s';
//transition：设置过渡
oImg[i].ondragstart=function ( ) {
return false;
}
}
//3.事件处理
clearInterval(time);
e=e||window.event;
x_=e.clientX;
y_=e.clientY;
// console.log ( "⿏标按下了" )
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轴;
ansform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
// var oDiv =ateElement('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;
}
// console.log ( "⿏标抬起了" )
//设置⼀个定时器，实现后⾯惯性效果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;
ansform='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 ElementById('box');
// for(var i=1;i<=11;i++){//有多少张图就循环多少次
// var imgs= ateElement('img');
// imgs.setAttribute("src", "img/"+i+".jpg");
// box.appendChild(imgs);}
/
/当页⾯加载完毕后再执⾏代码
//1.获取元素
var ElementById('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].ansform = 'rotateY('+ i*deg + 'deg) translateZ(350px)';
oImg[i].ansition =' all 1s '+ (oImg.length-i-1)*0.1 +'s';
//transition：设置过渡
oImg[i].ondragstart=function ( ) {
return false;
}
}
//3.事件处理
clearInterval(time);
e=e||window.event;
y_=e.clientY;
// console.log ( "⿏标按下了" )
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;
ansform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
// var oDiv =ateElement('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;
}
// console.log ( "⿏标抬起了" )
//设置⼀个定时器，实现后⾯惯性效果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;
ansform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
},30)
}
}
}
</script>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论