知識點：CSS33D效果,CSS3過度，原生JavaScript拖拽模塊開發，動態style樣式，力學模擬算法，event對象詳解，js邏輯思維與編程思想。

html代碼：

    <div class=‘perspective‘>
        <div class=‘wrap‘>
            <img src=‘images/1.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>
            <img src=‘images/2.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>
            <img src=‘images/3.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>
            <img src=‘images/4.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>
            <img src=‘images/5.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>
            <img src=‘images/6.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>
            <img src=‘images/7.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>
            <img src=‘images/8.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>
            <img src=‘images/9.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>
            <img src=‘images/10.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>
            <img src=‘images/11.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>
            <p></p>
        </div>
    </div>
 

css代碼：

  <style>
     *{margin:0;padding:0}
      body{
        background:#222;
        overflow:hidden;
        user-select:none;  /*禁止選中*/
      }
    .perspective{
        perspective:800px;  /*3d景深*/
    }
    .wrap{
        transform-style:preserve-3d;
        width:120px;
        height:180px;
        margin:100px auto;
        position:relative;
        transform:rotateX(-10deg) rotateY(0deg);
    }
    .wrap img{
        display:block;
        position:absolute;
        width:100%;
        height:100%;
        transform: rotateY(0deg) translateZ(0px);
        padding:10px;
        background:transparent;
        box-shadow: 0 0 4px #fff; /*水平位移 垂直位移 擴散程度 顏色*/
        border-radius:5px;        /*圓角*/
        -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%); /*倒影 倒影模式 直徑*/
    }
    .wrap p{
        width:1200px;
        height:1200px;
        background:-webkit-radial-gradient(center center ,600px 600px, rgba(122,122,122,0.5),rgba(0,0,0,0));
        position:absolute;
        border-radius:50%;
        left:50%;
        top:100%;
        margin-left:-600px;
        margin-top:-600px;
        transform:rotateX(90deg); /*沿著x軸方向摁倒*/
    }
  </style>
 

javascript代碼：

    <script>
            /*誰 觸發了什麽事件 誰做了什麽*/
            window.onload=function(){  /*頁面加載完成*/
            /*最新的原生獲取元素方法querySelectorAll*/
                var oImg=document.querySelectorAll(‘img‘); 
                var oWrap=document.querySelector(‘.wrap‘);
                var lastX,lastY,nowX,nowY,minusX,minusY,roY=0,roX=-10;
                var timer=null;
            /*計算每一個圖片的角度 總角度(360) / 數量(11) = 單位角度*/
                var length=oImg.length;  /*獲取img的數量 統稱為長度*/
                var Deg=360/length;      /*單位角度*/
                for(var i=0;i<length;i++){
                   oImg[i].style.transform=‘rotateY(‘+ i*Deg +‘deg) translateZ(350px)‘;
                   oImg[i].style.transition=‘transform 1s ‘+(length-1-i)*0.2+‘s‘
                }
                mTop();
                window.onresize=mTop;
                function mTop(){
                     /*獲取瀏覽器窗口可視高度*/
                    var wH=document.documentElement.clientHeight||document.body.clientHeight;
                    oWrap.style.marginTop=(wH/2)-oWrap.offsetHeight+‘px‘;
                }

                /*拖拽drag 按下 onmousedown 移動 onmousemove 擡起 onmouseup */
                document.onmousedown=function(event){ /*按下鼠標開始準備拖拽*/
                    event=event||window.event;          /*處理兼容性*/
                    lastX=event.clientX;                /*鼠標拖拽開始時的x坐標*/
                    lastY=event.clientY;                /*鼠標拖拽開始時的Y坐標*/
                    clearInterval(timer);
                    document.onmousemove=function(event){
                        event=event||window.event;  
                        nowX=event.clientX;             /*鼠標移動時的x坐標*/
                        nowY=event.clientY;             /*鼠標移動時的y坐標*/
                        minusX=nowX-lastX;              /*獲取鼠標移動距離*/
                        minusY=nowY-lastY;              /*獲取鼠標移動距離*/
                        roY+=minusX*0.2;                /*通過移動量計算旋轉角度*/
                        roX-=minusY*0.1;                /*通過移動量計算旋轉角度*/
                        oWrap.style.transform=‘rotateX(‘+roX+‘deg) rotateY(‘+roY+‘deg)‘ 
                        lastX=nowX;                     /*更新初始位置保證 lastX 跟得上鼠標*/
                        lastY=nowY;                     /*更新初始位置保證 lastY  */
                    }
                    document.onmouseup=function(){
                        document.onmousemove=null;
                        timer=setInterval(function(){
                            /*給一個摩擦系數,每一次定時器觸發都慢一點點*/
                            minusX*=0.9;                     
                            minusY*=0.9;
                            roY+=minusX*0.2;                /*通過移動量計算旋轉角度*/
                            roX-=minusY*0.1;                /*通過移動量計算旋轉角度*/
                            oWrap.style.transform=‘rotateX(‘+roX+‘deg) rotateY(‘+roY+‘deg)‘;
                            if(Math.abs(minusX)<0.1&&Math.abs(minusY)<0.1){
                                /*當移動向量過小的時候終止定時器停止慣性*/
                                clearInterval(timer);    
                            }
                        },13);
                    }
                    return false;
                }

            }
    </script>
 

有興趣想學習web前端的可以來web前端qun“189394454”可以免費獲取2018最新web前端學習資料。

javascript加CSS3做不一樣的3D拖拽照片墻