Seite drehen Animationseffekt

Question

Ich brauche Buch Seite drehen Animation Effekt Ladebildschirm. Ich habe für eine Runde erstellt, ich brauche kontinuierliche Drehung, wie man Buch wie Laden macht.

Ich möchte diese Seite Turn Book Effect implementieren. zum Laden Bildschirm.

Notwendigkeit, neue Wendung Seite nach dem Einschalten eine Seite

.cssload-thecube { 
 
    width: 96px; 
 
    height: 69px; 
 
    margin: 0 auto; 
 
    margin-top: 49px; 
 
    position: relative; 
 
    background-color: #000; 
 
} 
 
.cssload { 
 
    width: 73px; 
 
    height: 73px; 
 
    margin: 0 auto; 
 
    margin-top: 49px; 
 
    position: relative; 
 
    background-color: rgb(43,160,199); 
 
} 
 
.cssload-thecube .cssload-cube { 
 
    position: relative; 
 

 
} 
 
.cssload-thecube .cssload-cube { 
 
    float: left; 
 
    width: 50%; 
 
    height: 50%; 
 
    position: relative; 
 
    transform: scale(1.1); 
 
    -o-transform: scale(1.1); 
 
    -ms-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    -moz-transform: scale(1.1); 
 
} 
 
.cssload-thecube .cssload-cube:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -36px; 
 
    left: 15px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgb(43,160,199); 
 
    animation: cssload-fold-thecube 2.76s infinite linear both; 
 
    -o-animation: cssload-fold-thecube 2.76s infinite linear both; 
 
    -ms-animation: cssload-fold-thecube 2.76s infinite linear both; 
 
    -webkit-animation: cssload-fold-thecube 2.76s infinite linear both; 
 
    -moz-animation: cssload-fold-thecube 2.76s infinite linear both; 
 
    transform-origin: 100% 100%; 
 
    -o-transform-origin: 100% 100%; 
 
    -ms-transform-origin: 100% 100%; 
 
    -webkit-transform-origin: 100% 100%; 
 
    -moz-transform-origin: 100% 100%; 
 
} 
 
.cssload-thecube .cssload-c2 { 
 
    transform: scale(1.1) rotateZ(90deg); 
 
    -o-transform: scale(1.1) rotateZ(90deg); 
 
    -ms-transform: scale(1.1) rotateZ(90deg); 
 
    -webkit-transform: scale(1.1) rotateZ(90deg); 
 
    -moz-transform: scale(1.1) rotateZ(90deg); 
 
} 
 

 
@keyframes cssload-fold-thecube { 
 
0%, 50% { 
 
    transform: perspective(-180deg) rotateX(-136px); 
 
    opacity: 0; 
 
} 
 
50%, 
 
100% { 
 
    transform: perspective(136px) rotateX(-180deg); 
 
    opacity: 1; 
 
} 
 
    }

<div class="cssload-thecube"> 
 
    <div class="cssload-cube cssload-c2"></div> 
 
</div>

Answer 1

@keyframes cssload-fold-thecube { 
    0%, 50% { 
    transform: perspective(-180deg) rotateX(-136px); 
    opacity: 0; 
    } 
    50%, 
    100% { 
    transform: perspective(136px) rotateX(-180deg); 
    opacity: 1; 
    } 
}