js实现翻书效果

一、实现效果一

"en">
    
        "UTF-8">
        
        
    
    
        
"book pre-3d" id="book">
            
            

            
"" id="Rcover">"img/6.jpg" alt="">
            
            
"pre-3d  page front2">"img/5.jpg" alt="">
            
"pre-3d  page front2">"img/4.jpg" alt="">
            
"pre-3d  page front2">"img/3.jpg" alt="">
            
"pre-3d  page front2">"img/2.jpg" alt="">
            
            
"pre-3d  page front1">"img/1.jpg" alt="">
            
        
    

复制代码

实现效果二

    
        
        
        
    
    
        

            
            

            
ddds
            
            
sssss
            
ddfdf
            
ssdf
            
sddd
            
            

            
        
   

复制代码

实现效果 三

@keyframes twoLeft

{    0%   {      display:flex;      z-index: 3;      transform:rotateY(0deg);    }    49%{      display:none !important;      z-index: 3;    }    50%{      display:none !important;      z-index: -1;    }    100% {      display:none !important;      z-index: -1;      transform:rotateY(-180deg);    }}@keyframes threeLeft{    0%   {      display:none;      z-index: -1;      transform:rotateY(180deg);    }    49%{      display:flex !important;;      z-index: -1;    }    50%{      display:flex !important;;      z-index: 3;    }    100% {      display:flex !important;;      z-index: 3;      transform:rotateY(0deg);    }}@keyframes oneRight{    0%   {      display:flex;      z-index: 3;      transform:rotateY(0deg);    }    49%{      display:none !important;      z-index: 3;    }    50%{      display:none !important;      z-index: -1;    }    100% {      display:none !important;      z-index: -1;      transform:rotateY(180deg);    }}@keyframes fourRight{    0%   {      display:none;      z-index: -1;      transform:rotateY(-180deg);    }    49%{      display:flex !important;;      z-index: -1;    }    50%{      display:flex !important;;      z-index: 3;    }    100% {      display:flex !important;;      z-index: 3;      transform:rotateY(0deg);    }}
复制代码

转载于:https://juejin.im/post/5d2d3bb06fb9a07eb67dc1ea