也忘记了代码是不是自己写的了，记下来，下次需要可以留用，还是有些坑在里面。
<!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(0deg) rotateY(0deg) ; } .box div{ position: absolute; top:0; left: 0; width: 100%; height: 100%; border: 0px; /*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 style="width: 647px;height: 386px;border: 1px solid #ff0000;line-height: 386px; "> <div id="img1" class="box" style="position:relative;"></div> </div> <script> function setImg(id,src,width,height) { var parent=document.getElementById(id); parent.style.width=width+"px"; parent.style.height=height+"px"; parent.style.top='calc( 50% - '+height/2+'px)'; parent.style.left=""; for (var i=0 ;i<width;i++){ var ele=document.createElement("div"); var pos = -i + "px"; /* * backgroundImage: "url(" + img + ")", backgroundPosition: "0px " + pos, height: "1px", width: _w + "px", position: "absolute", top: i + "px" * */ ele.style.backgroundImage="url("+src+")"; ele.style.backgroundPosition=pos+" 0px"; ele.style.height=height+"px"; ele.style.width="1px"; ele.style.position="absolute"; ele.style.left=0 + "px"; ele.style.backgroundSize=width+"px "+height+"px"; parent.append(ele) } } var width=250; var height=150; setImg("img1","./img/1.jpg",width,height) setImg("img1","./img/2.jpg",width,height) setImg("img1","./img/3.jpg",width,height) setImg("img1","./img/4.jpg",width,height) setImg("img1","./img/5.jpg",width,height) setImg("img1","./img/6.jpg",width,height) window.onload=function ( ) { //1.获取元素 var oWrap = document.getElementById('img1'); var oImg = oWrap.children; // var oImgLen=oImg.length; //var deg = 360 / oImg.length;//3.每个需要旋转的度数 var degP =360/6; var l= 1+(150/650);//w+w*(l/(s-l))1.231 //l=nπr/180; var w=width; //l=w+w(150/650)=n*Math.PI*150/180 var n=(w+w*(150/650))/(Math.PI*150/180) console.log(n); console.log(n/width); var degC=0.16;//Math.atan(l/150)/(Math.PI / 180);//0.888479771920148//0.4 // 定义一个开始的度数 var roX = -10; var roY = 0; var x, y, x_, y_, xN, yN, time = null; //2.遍历所有的img标签 for(var i=0;i<6;i++){ for (var j=0;j<width;j++){ oImg[j+i*width].style.transform = 'rotateY(' + (i * degP+j*degC) + 'deg) translateZ(150px)'; // oImg[j+i*width].style.transition = ' all 1s ' + (oImg.length - i - 1) * 0.1 + 's'; //transition:设置过渡 oImg[j+i*width].ondragstart = function () { return false; } } } /* 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>这里需要添加图片
