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

最新推荐文章于 2024-08-27 17:15:42 发布

Lucky铂爵

最新推荐文章于 2024-08-27 17:15:42 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/weixin_44816309/article/details/106803670

版权

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:

<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;
    -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>
      //当页面加载完毕后再执行代码
      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)';
            
            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>