原生JS实现逼真的图片3D旋转效果详解
程序员文章站
2023-11-16 18:57:52
本文实例讲述了原生js实现逼真的图片3d旋转效果。分享给大家供大家参考，具体如下：
实现效果:
实现过程:
步骤一:先写一个简单的html结构,创建一个box盒子...
本文实例讲述了原生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>
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript动画特效与技巧汇总》、《javascript页面元素操作技巧总结》、《javascript运动效果与技巧汇总》、《javascript图形绘制技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇： 美图秀秀怎么给图片中的物体上色?
下一篇： 微信小程序基于picker实现级联菜单