1.先看效果图：例子中用的为网络图片，可以更换为自己的，由于大小限制，只能短暂录制！具体效果，可自己运行查看！
2.代码：
<!doctype html><html><head><meta charset="UTF-8"><title>用CSS3&JS实现在三维空间里图片3D旋转效果 - Web前端之家</title><style type="text/css">body{background-color:#000;}*{padding:0px;margin:0px;}#perspective{perspective: 1000px; /*设置视角距舞台的距离还可已设置是否透视，默认为否*/}#wrap{width:133px; /*外包装*/height:200px;position:relative;top:0;left:0;margin:50px auto;transform-style:preserve-3D;transform:rotateX(-10deg);}#wrap img{width:100%;height:100%;position:absolute;top:0px;left:0px;border-radius:6px;box-shadow:0px 0px 15px #00FA9A;cursor:pointer; /*手型*/box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));/*倒影*/-webkit-box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); /*倒影*/-moz-box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); /*很遗憾，火狐不支持*/}</style></head><body><div id="perspective"> <!-- 相当于舞台 --><div id="wrap"> <!-- 相当于外包装 --><img src="/timg?image&quality=80&size=b9999_10000&sec=1583485194364&di=c294f0cf1e24d721f94d5963c3f83809&imgtype=0&src=http%3A%2F%%2Fuploads%2F0803%2F20%2F1533299632-xdorlhztcL.jpg" alt="" title=""><img src="/timg?image&quality=80&size=b9999_10000&sec=1583485194355&di=e4841f2ea0a442171248a9622407c55d&imgtype=0&src=http%3A%2F%%2F151110%2F330390-151110045H621.jpg" alt="" title=""><img src="/timg?image&quality=80&size=b9999_10000&sec=1583485194350&di=2000c5b1ebf0da2b8a6a29961cabf941&imgtype=0&src=http%3A%2F%%2Ftuku%2Fyulantu%2F14%2F6447-1401104066.jpg" alt="" title=""><img src="/timg?image&quality=80&size=b9999_10000&sec=1583485272737&di=a748e9c3eb03f2afe2da2b1b06ae7b65&imgtype=jpg&src=http%3A%2F%2Fimg3.%2Fit%2Fu%3D3310776048%2C522059251%26fm%3D214%26gp%3D0.jpg" alt="" title=""><img src="/timg?image&quality=80&size=b9999_10000&sec=1583485194430&di=230053db8f9037b2c60c44fbf206e47a&imgtype=0&src=http%3A%2F%%2F1213%2F6168183_004444903000_2.jpg" alt="" title=""><img src="/timg?image&quality=80&size=b9999_10000&sec=1583485194422&di=b222d0a2e3816e14759c7f42242adc31&imgtype=0&src=http%3A%2F%%2F0719%2F12728082_181444133000_2.jpg" alt="" title=""><img src="/timg?image&quality=80&size=b9999_10000&sec=1583485194420&di=f2fd222279577a1a063adf34e4344e12&imgtype=0&src=http%3A%2F%2Fa0.%2F33%2F67%2F01300000027077119975673353150.jpg" alt="" title=""><img src="/timg?image&quality=80&size=b9999_10000&sec=1583485194418&di=a0f99205721548cd2a8c90259a1b8719&imgtype=0&src=http%3A%2F%%2Fimgad%2Fpic%2Fitem%2F377adab44aed2e73f21d3e0a8d01a18b87d6fa24.jpg" alt="" title=""><img src="/timg?image&quality=80&size=b9999_10000&sec=1583485338630&di=ddebb21e9d2dcda0d7e2b71f5e12225d&imgtype=jpg&src=http%3A%2F%2Fimg3.%2Fit%2Fu%3D2215500968%2C1233095507%26fm%3D214%26gp%3D0.jpg" alt="" title=""><img src="/timg?image&quality=80&size=b9999_10000&sec=1583485369409&di=9358e975fc8c0964c671d73f482dfa67&imgtype=jpg&src=http%3A%2F%2Fimg1.%2Fit%2Fu%3D1628392856%2C2110895450%26fm%3D214%26gp%3D0.jpg" alt="" title=""><img src="/timg?image&quality=80&size=b9999_10000&sec=1583485359112&di=a1342c2b4cf36322a1b77aa7b9d7afa6&imgtype=0&src=http%3A%2F%%2Felement_origin_min_pic%2F18%2F03%2F24%2F8673b6490fd70a144091f490982e10d2.jpg" alt="" title="" onclick="alert('我是小鸡')"><img src="/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1583474489&di=8578fdd38981d9447971050f116edc55&src=http://a0./78/52/01200000123847134434529793168.jpg" alt="" title="" onclick="alert('我是老虎')"></div></div><script type="text/javascript">/*总结：首先将每个图片赋值一个不同的角度和一个偏移位置然后在拖放时实时更新这个角度和偏移量在拖放结束时逐渐减小这个角度和偏移量也可以做成只在平面转动的，只要不改变rotateX就行*/window.onload =function(){var wrapDom = document.querySelector("#wrap"); //获取wrapvar imgDom = document.getElementsByTagName("img");//获取wrapimgvar wrap = document.getElementById('wrap');var len = imgDom.length;//获取img的长度var imgDeg = 360/len; //平分360度for(var i=0;i<len;i++){ //分别赋值每个img一个rotateY(沿Y轴转动)和translateZ(偏移位置)imgDom[i].style.transform= "rotateY("+i*imgDeg+"deg) translateZ(350px)";imgDom[i].style.transition ="transform 1s "+(len-1-i)*0.2+"s";}var lastx,lasty,nowx,nowy,changeX,changeY,roX=-10,roY=0; //初始化新旧鼠标坐标 每次改变坐标大小 和rotateX和rotateY初始值center(); //执行函数window.onresize =center;//当缩放窗口时调用函数function center(){ // 垂直居中啊var mt = window.innerHeight/2-wrapDom.offsetHeight; //获取窗口高度除以二再减去容器高度=容器顶距窗口顶的距离wrapDom.style.cssText = "margin-top:"+mt+"px";}setTimeout(function(){wrap.style.backgroundImage = "url(img/12.jpg)";},2000)document.onmousedown = function(e){clearInterval(timer)var timer = null;var ev = e||window.event;//兼容事件lastx = ev.clientX; //当前鼠标位置lasty = ev.clientY;this.onmousemove = function(e){clearInterval(timer)var ev = e||window.event;var nowx = ev.clientX; //现在鼠标位置var nowy = ev.clientY;changeX=nowx-lastx; //x轴变化了多少changeY=nowy-lasty; //y轴变化了多少roY+=changeX*0.1; //调节转的速度roX-=changeY*0.1; //调节转的速度wrapDom.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)"; //赋值新的rotateX和rotateYlastx=nowx; //将旧的数据更新lasty=nowy; //将旧的数据更新}this.onmouseup = function(){this.onmousemove = null; //取消移动事件timer=setInterval(function(){ //设定时器逐渐减小rotateX和rotateYchangeX*=0.95; //每30毫秒rotateX减少5%changeY*=0.95; //每30毫秒rotateY减少5%roY+=changeX*0.2; //调节转的速度roX-=changeY*0.2; //调节转的速度wrapDom.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)";//赋值新的rotateX和rotateY},30)}return false; //取消默认事件}}// /article/CSS234JS832592835.html</script></body></html>
