css 3実現3 dスクロールホイールキャストスロットルバルブ処理クリックイベント

    
    
    



    

        

            
            
            
            
        
        

            
            
            
            
        
        

            
            
            
            
        
        

            
            
            
            
        
        

            
            
            
            
        
    
    <
    >



    let pos = 1;
    //     
    let flag = true;
    $(".next").on('click',function () {
       if (flag==true){
           flag=false;
           pos++;
           /*    li*/
           $("li").each(function (i,v) {
               /*    tansform    */
               $(v).css({
                   "transform":"rotateX("+(-(pos*90))+"deg)",
                   "transition":"transform "+(i*0.3)+"s"
               })
           })
       }
       setTimeout(function () {
           flag=true;
       },1000)
    })
    $(".pre").on('click',function () {
        if (flag==true){
            flag=false;
            pos--;
            /*    li*/
            $("li").each(function (i,v) {
                /*    tansform    */
                $(v).css({
                    "transform":"rotateX("+(-(pos*90))+"deg)",
                    "transition":"transform "+(i*0.3)+"s"
                })
            })
        }
        setTimeout(function () {
            flag=true;
        },1000)
    })