<div class="book">
<div class="book__page"></div>
<div class="book__page"></div>
<div class="book__page"></div>
</div>
$peter-river:#3498db;
$clouds:#ecf0f1;
body{
width:100%;
height:100vh;
background:$peter-river;
}
.book{
top: 50%;
transform: translateY(-50%);
position:relative;
margin:0 auto;
border:5px solid $clouds;
width:100px;
height:60px;
}
.book__page{
position:absolute;
left:50%;
top:-5px;
margin:0 auto;
border-top:5px solid $clouds;
border-bottom:5px solid $clouds;
border-right:5px solid $clouds;
background:$peter-river;
width:50px;
height:60px;
transform-origin:0% 50%;
animation:flip 1.2s infinite linear;
animation-fill-mode:forwards;
@for $i from 1 through 3 {
&:nth-child(#{$i}) {
z-index:-$i;
animation-delay:1.4s*$i;
}
}
}
@keyframes flip {
0%{
transform: perspective( 600px )
rotateY( -0deg );
}
20%{
background:darken($peter-river,10%);
}
29.9%{
background:darken($peter-river,10%);
}
30%{
transform: perspective( 200px )
rotateY( -90deg );
background:$peter-river;
}
54.999%{
opacity:1;
}
55%{
opacity:0;
}
60%{
transform: perspective( 200px )
rotateY( -180deg );
background:$peter-river;
}
100%{
transform: perspective( 200px )
rotateY( -180deg );
background:$peter-river;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.