javascript加CSS3做不一样的

知识点：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;  
    }
    .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); 
    }
  </style>

javascript代码：

    <script>
            
            window.onload=function(){  
            
                var oImg=document.querySelectorAll('img'); 
                var oWrap=document.querySelector('.wrap');
                var lastX,lastY,nowX,nowY,minusX,minusY,roY=0,roX=-10;
                var timer=null;
            
                var length=oImg.length;  
                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';
                }

                
                document.onmousedown=function(event){ 
                    event=event||window.event;          
                    lastX=event.clientX;                
                    lastY=event.clientY;                
                    clearInterval(timer);
                    document.onmousemove=function(event){
                        event=event||window.event;  
                        nowX=event.clientX;             
                        nowY=event.clientY;             
                        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;                     
                        lastY=nowY;                     
                    }
                    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前端学习资料。