How to Create Turning pages with CSS Torque Programming
Card Design Frotend HTML & CSS Web Development 

How to Create Turning pages with CSS

torque-programming 0 Comments , 15 min read

How to Create Turning pages with CSS.

In today’s digital age, creating engaging and interactive web design has become increasingly important. One way to do this is by incorporating the illusion of turning pages into your website design. Fortunately, with just a few lines of code using CSS, you can easily achieve this effect.

To create turning pages with CSS, you first need to create a div element for each page. Within each div, add your content and style it as desired. Then, create a wrapper div to contain all of the page divs. Apply a perspective value to the wrapper div to give it depth and create the 3D effect.

Next, create an input element with the type “checkbox” to act as the trigger for the page turning animation. This checkbox will be styled to look like a button and placed on the page.

To animate the pages turning, use CSS transitions to rotate the page divs around the Y-axis when the checkbox is checked. To make the pages turn in different directions, adjust the rotation angle and direction for each page div.

Finally, add some additional CSS to make the animation smoother and more realistic. For example, add a transition-delay to each page div to make them appear to turn in sequence.

With these steps, you can create a visually appealing and interactive turning pages effect on your website using only CSS. This design element can add a unique touch to your website and engage your audience in a new way. However, be mindful not to overuse this effect and make sure it fits with the overall design and purpose of your website.

How to Create Turning pages with CSS

HTML Code

Step 1 write Basic Structure of HTML code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Create 3D CSS Cards With Hover Effect - Torque Programming</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

</body>
</html>

Paste the below code in your tag.

<div class="imgLoader"></div>

    <div class="container">
        <h1 class="title">
            Turning pages<br />
            with css
        </h1>

        <div class="credit">
            * Images loaded randomly from Picsum.photos
        </div>

        <div class="book">
            <div class="gap"></div>
            <div class="pages">
                <div class="page"></div>
                <div class="page"></div>
                <div class="page"></div>
                <div class="page"></div>
                <div class="page"></div>
                <div class="page"></div>
            </div>
            <div class="flips">
                <div class="flip flip1">
                    <div class="flip flip2">
                        <div class="flip flip3">
                            <div class="flip flip4">
                                <div class="flip flip5">
                                    <div class="flip flip6">
                                        <div class="flip flip7"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <a href="https://twitter.com/amit_sheen" class="twitterLink" target="_top">
        <img src="https://assets.codepen.io/1948355/twitterLogo2.png" />
    </a>


<div class="container">
    <h1 class="title">
        Turning pages<br />
        with css
    </h1>

    <div class="credit">
        * Images loaded randomly from Picsum.photos
    </div>

    <div class="book">
        <div class="gap"></div>
        <div class="pages">
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
        </div>
        <div class="flips">
            <div class="flip flip1">
                <div class="flip flip2">
                    <div class="flip flip3">
                        <div class="flip flip4">
                            <div class="flip flip5">
                                <div class="flip flip6">
                                    <div class="flip flip7"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<a href="https://twitter.com/amit_sheen" class="twitterLink" target="_top">
    <img src="https://assets.codepen.io/1948355/twitterLogo2.png" />
</a>

Output Till Now

How to Create Turning pages with CSS Torque Programming
How to Create Turning pages with CSS

CSS Code

Create a file style.css and paste the code below.

@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");
* {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
    font-family: "Indie Flower", cursive;
    background-color: #eee;
    color: #555;
    text-align: center;
    padding: 4em 0;
}

.imgLoader {
    position: fixed;
    -webkit-animation: preLoad 1s steps(1);
    animation: preLoad 1s steps(1);
    width: 1px;
    height: 1px;
}
@-webkit-keyframes preLoad {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
    }
    10% {
        background-image: url("https://picsum.photos/420/300?random=2");
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=3");
    }
    30% {
        background-image: url("https://picsum.photos/420/300?random=4");
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=5");
    }
    100% {
        display: none;
    }
}
@keyframes preLoad {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
    }
    10% {
        background-image: url("https://picsum.photos/420/300?random=2");
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=3");
    }
    30% {
        background-image: url("https://picsum.photos/420/300?random=4");
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=5");
    }
    100% {
        display: none;
    }
}

.container {
    position: relative;
    width: 420px;
    border: #fff solid 2px;
    border-radius: 4px;
    height: 420px;
}

.title {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    font-size: 2em;
    font-weight: normal;
    line-height: 1;
}

.credit {
    position: absolute;
    top: 100%;
    left: 0;
    font-size: 0.9em;
    text-align: left;
}

.book {
    position: relative;
    perspective: 630px;
    perspective-origin: center 50px;
    transform: scale(1.2);
    filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.25));
}

.page {
    width: 210px;
    height: 300px;
    background-color: #bbb;
    position: absolute;
    top: 0px;
    right: 50%;
    transform-origin: 100% 100%;
    border: solid #555 2px;
    background-size: 420px 300px;
    background-position: center;
    transform-style: preserve-3d;
}
.page:nth-child(1) {
    transform: rotateX(60deg) rotateY(3deg);
}
.page:nth-child(2) {
    transform: rotateX(60deg) rotateY(4.5deg);
}
.page:nth-child(3) {
    transform: rotateX(60deg) rotateY(6deg);
    -webkit-animation: nextPage 25s infinite -24s steps(1);
    animation: nextPage 25s infinite -24s steps(1);
    background-size: 420px 300px;
    background-position: -2px -2px;
}
.page:nth-child(4) {
    transform: rotateX(60deg) rotateY(177deg);
}
.page:nth-child(5) {
    transform: rotateX(60deg) rotateY(175.5deg);
}
.page:nth-child(6) {
    transform: rotateX(60deg) rotateY(174deg);
    overflow: hidden;
}
.page:nth-child(6)::after {
    content: "";
    width: 210px;
    height: 300px;
    position: absolute;
    top: 0px;
    right: 0%;
    transform-origin: center;
    transform: rotateY(180deg);
    -webkit-animation: nextPage 25s -20s infinite steps(1);
    animation: nextPage 25s -20s infinite steps(1);
    background-size: 420px 300px;
    background-position: 100% -2px;
}
@-webkit-keyframes nextPage {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
    }
}
@keyframes nextPage {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
    }
}

.gap {
    width: 10px;
    height: 300px;
    background: none;
    transform: rotateX(60deg);
    transform-origin: bottom;
    position: absolute;
    top: 0px;
    left: calc(50% - 5px);
}
.gap::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    background-color: #555;
    width: 10px;
    height: 5px;
    border-radius: 50%;
}

.pages,
.flips {
    transform-style: preserve-3d;
}

.flip {
    width: 32px;
    height: 300px;
    position: absolute;
    top: 0px;
    transform-origin: 100% 100%;
    right: 100%;
    border: solid #555;
    border-width: 2px 0px;
    perspective: 4200px;
    perspective-origin: center;
    transform-style: preserve-3d;
    background-size: 420px 300px;
}
.flip::after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0%;
    width: 100%;
    height: 100%;
    transform-origin: center;
    background-size: 420px 300px;
}
.flip.flip1 {
    right: 50%;
    -webkit-animation: flip1 5s infinite ease-in-out;
    animation: flip1 5s infinite ease-in-out;
    border-width: 2px 2px 2px 0;
}
.flip.flip1::after {
    -webkit-animation: nextFlip1 25s -20s infinite steps(1);
    animation: nextFlip1 25s -20s infinite steps(1);
}
.flip:not(.flip1) {
    right: calc(100% - 2px);
    top: -2px;
    transform-origin: right;
    -webkit-animation: flip2 5s ease-in-out infinite;
    animation: flip2 5s ease-in-out infinite;
}
.flip.flip2::after {
    -webkit-animation: nextFlip2 25s -20s infinite steps(1);
    animation: nextFlip2 25s -20s infinite steps(1);
}
.flip.flip3::after {
    -webkit-animation: nextFlip3 25s -20s infinite steps(1);
    animation: nextFlip3 25s -20s infinite steps(1);
}
.flip.flip4::after {
    -webkit-animation: nextFlip4 25s -20s infinite steps(1);
    animation: nextFlip4 25s -20s infinite steps(1);
}
.flip.flip5::after {
    -webkit-animation: nextFlip5 25s -20s infinite steps(1);
    animation: nextFlip5 25s -20s infinite steps(1);
}
.flip.flip6::after {
    -webkit-animation: nextFlip6 25s -20s infinite steps(1);
    animation: nextFlip6 25s -20s infinite steps(1);
}
.flip.flip7::after {
    -webkit-animation: nextFlip7 25s -20s infinite steps(1);
    animation: nextFlip7 25s -20s infinite steps(1);
}
.flip.flip7 {
    width: 30px;
    border-width: 2px 0px 2px 2px;
}
.flip.flip7::after {
    -webkit-animation: nextFlip7 25s -20s infinite steps(1);
    animation: nextFlip7 25s -20s infinite steps(1);
}
@-webkit-keyframes flip1 {
    0%,
    20% {
        transform: rotateX(60deg) rotateY(6deg);
    }
    80%,
    100% {
        transform: rotateX(60deg) rotateY(174deg);
    }
}
@keyframes flip1 {
    0%,
    20% {
        transform: rotateX(60deg) rotateY(6deg);
    }
    80%,
    100% {
        transform: rotateX(60deg) rotateY(174deg);
    }
}
@-webkit-keyframes flip2 {
    0%,
    20% {
        transform: rotateY(0deg) translateY(0px);
    }
    50% {
        transform: rotateY(-15deg) translateY(0px);
    }
}
@keyframes flip2 {
    0%,
    20% {
        transform: rotateY(0deg) translateY(0px);
    }
    50% {
        transform: rotateY(-15deg) translateY(0px);
    }
}

@-webkit-keyframes nextFlip1 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -178px -2px;
        transform: rotateY(0deg);
    }
    10% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -210px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -178px -2px;
        transform: rotateY(0deg);
    }
    30% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -210px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -178px -2px;
        transform: rotateY(0deg);
    }
    50% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -210px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -178px -2px;
        transform: rotateY(0deg);
    }
    70% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -210px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -178px -2px;
        transform: rotateY(0deg);
    }
    90% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -210px -2px;
        transform: rotateY(180deg);
    }
}

@keyframes nextFlip1 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -178px -2px;
        transform: rotateY(0deg);
    }
    10% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -210px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -178px -2px;
        transform: rotateY(0deg);
    }
    30% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -210px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -178px -2px;
        transform: rotateY(0deg);
    }
    50% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -210px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -178px -2px;
        transform: rotateY(0deg);
    }
    70% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -210px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -178px -2px;
        transform: rotateY(0deg);
    }
    90% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -210px -2px;
        transform: rotateY(180deg);
    }
}
@-webkit-keyframes nextFlip2 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -148px -2px;
        transform: rotateY(0deg);
    }
    10.5% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -238px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -148px -2px;
        transform: rotateY(0deg);
    }
    30.5% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -238px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -148px -2px;
        transform: rotateY(0deg);
    }
    50.5% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -238px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -148px -2px;
        transform: rotateY(0deg);
    }
    70.5% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -238px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -148px -2px;
        transform: rotateY(0deg);
    }
    90.5% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -238px -2px;
        transform: rotateY(180deg);
    }
}
@keyframes nextFlip2 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -148px -2px;
        transform: rotateY(0deg);
    }
    10.5% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -238px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -148px -2px;
        transform: rotateY(0deg);
    }
    30.5% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -238px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -148px -2px;
        transform: rotateY(0deg);
    }
    50.5% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -238px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -148px -2px;
        transform: rotateY(0deg);
    }
    70.5% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -238px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -148px -2px;
        transform: rotateY(0deg);
    }
    90.5% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -238px -2px;
        transform: rotateY(180deg);
    }
}
@-webkit-keyframes nextFlip3 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -118px -2px;
        transform: rotateY(0deg);
    }
    11% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -268px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -118px -2px;
        transform: rotateY(0deg);
    }
    31% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -268px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -118px -2px;
        transform: rotateY(0deg);
    }
    51% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -268px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -118px -2px;
        transform: rotateY(0deg);
    }
    71% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -268px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -118px -2px;
        transform: rotateY(0deg);
    }
    91% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -268px -2px;
        transform: rotateY(180deg);
    }
}
@keyframes nextFlip3 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -118px -2px;
        transform: rotateY(0deg);
    }
    11% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -268px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -118px -2px;
        transform: rotateY(0deg);
    }
    31% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -268px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -118px -2px;
        transform: rotateY(0deg);
    }
    51% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -268px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -118px -2px;
        transform: rotateY(0deg);
    }
    71% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -268px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -118px -2px;
        transform: rotateY(0deg);
    }
    91% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -268px -2px;
        transform: rotateY(180deg);
    }
}
@-webkit-keyframes nextFlip4 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -88px -2px;
        transform: rotateY(0deg);
    }
    11.5% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -298px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -88px -2px;
        transform: rotateY(0deg);
    }
    31.5% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -298px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -88px -2px;
        transform: rotateY(0deg);
    }
    51.5% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -298px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -88px -2px;
        transform: rotateY(0deg);
    }
    71.5% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -298px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -88px -2px;
        transform: rotateY(0deg);
    }
    91.5% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -298px -2px;
        transform: rotateY(180deg);
    }
}
@keyframes nextFlip4 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -88px -2px;
        transform: rotateY(0deg);
    }
    11.5% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -298px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -88px -2px;
        transform: rotateY(0deg);
    }
    31.5% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -298px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -88px -2px;
        transform: rotateY(0deg);
    }
    51.5% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -298px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -88px -2px;
        transform: rotateY(0deg);
    }
    71.5% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -298px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -88px -2px;
        transform: rotateY(0deg);
    }
    91.5% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -298px -2px;
        transform: rotateY(180deg);
    }
}
@-webkit-keyframes nextFlip5 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -58px -2px;
        transform: rotateY(0deg);
    }
    12% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -328px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -58px -2px;
        transform: rotateY(0deg);
    }
    32% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -328px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -58px -2px;
        transform: rotateY(0deg);
    }
    52% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -328px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -58px -2px;
        transform: rotateY(0deg);
    }
    72% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -328px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -58px -2px;
        transform: rotateY(0deg);
    }
    92% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -328px -2px;
        transform: rotateY(180deg);
    }
}
@keyframes nextFlip5 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -58px -2px;
        transform: rotateY(0deg);
    }
    12% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -328px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -58px -2px;
        transform: rotateY(0deg);
    }
    32% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -328px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -58px -2px;
        transform: rotateY(0deg);
    }
    52% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -328px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -58px -2px;
        transform: rotateY(0deg);
    }
    72% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -328px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -58px -2px;
        transform: rotateY(0deg);
    }
    92% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -328px -2px;
        transform: rotateY(180deg);
    }
}
@-webkit-keyframes nextFlip6 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -28px -2px;
        transform: rotateY(0deg);
    }
    12.5% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -358px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -28px -2px;
        transform: rotateY(0deg);
    }
    32.5% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -358px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -28px -2px;
        transform: rotateY(0deg);
    }
    52.5% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -358px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -28px -2px;
        transform: rotateY(0deg);
    }
    72.5% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -358px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -28px -2px;
        transform: rotateY(0deg);
    }
    92.5% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -358px -2px;
        transform: rotateY(180deg);
    }
}
@keyframes nextFlip6 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -28px -2px;
        transform: rotateY(0deg);
    }
    12.5% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -358px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -28px -2px;
        transform: rotateY(0deg);
    }
    32.5% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -358px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -28px -2px;
        transform: rotateY(0deg);
    }
    52.5% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -358px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -28px -2px;
        transform: rotateY(0deg);
    }
    72.5% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -358px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -28px -2px;
        transform: rotateY(0deg);
    }
    92.5% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -358px -2px;
        transform: rotateY(180deg);
    }
}
@-webkit-keyframes nextFlip7 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -2px -2px;
        transform: rotateY(0deg);
    }
    13% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -388px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -2px -2px;
        transform: rotateY(0deg);
    }
    33% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -388px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -2px -2px;
        transform: rotateY(0deg);
    }
    53% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -388px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -2px -2px;
        transform: rotateY(0deg);
    }
    73% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -388px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -2px -2px;
        transform: rotateY(0deg);
    }
    93% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -388px -2px;
        transform: rotateY(180deg);
    }
}
@keyframes nextFlip7 {
    0% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -2px -2px;
        transform: rotateY(0deg);
    }
    13% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -388px -2px;
        transform: rotateY(180deg);
    }
    20% {
        background-image: url("https://picsum.photos/420/300?random=2");
        background-position: -2px -2px;
        transform: rotateY(0deg);
    }
    33% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -388px -2px;
        transform: rotateY(180deg);
    }
    40% {
        background-image: url("https://picsum.photos/420/300?random=3");
        background-position: -2px -2px;
        transform: rotateY(0deg);
    }
    53% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -388px -2px;
        transform: rotateY(180deg);
    }
    60% {
        background-image: url("https://picsum.photos/420/300?random=4");
        background-position: -2px -2px;
        transform: rotateY(0deg);
    }
    73% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -388px -2px;
        transform: rotateY(180deg);
    }
    80% {
        background-image: url("https://picsum.photos/420/300?random=5");
        background-position: -2px -2px;
        transform: rotateY(0deg);
    }
    93% {
        background-image: url("https://picsum.photos/420/300?random=1");
        background-position: -388px -2px;
        transform: rotateY(180deg);
    }
}
.twitterLink {
    position: fixed;
    bottom: 0.5em;
    right: 0.5em;
}
.twitterLink img {
    width: 2em;
    filter: grayscale(100%);
    transition: filter 0.25s;
}
.twitterLink img:hover {
    filter: grayscale(0%);
}

Final Output

How to Create Turning pages with CSS Torque Programming
How to Create Turning pages with CSS

You May Also Like

Recommended Post

How to Implement Hooks in Codeigniter Torque Programming

How to Implement Hooks in Codeigniter

torque-programming 0

In this tutorial, we will explain how to use custom hooks in CodeIgniter. Hooks are a way to modify the

Step By Step Form Validation Using HTML CSS And JavaScript Torque Programming

Step By Step Form Validation Using HTML, CSS And JavaScript

torque-programming 0

Hello and welcome to Torque Programming! In today’s session, we will create a complete form validation system utilizing HTML, CSS,

How to Generate QR Code In Laravel 10 Example Torque Programming

How to Generate QR Code In Laravel 10 Example

torque-programming 0

How to Generate QR Code in Laravel 10. In this Article, we will learn how to generate/create QR code usign

Laravel 10 Typeahead JS Autocomplete Search Example Torque Programming

Laravel 10 Typeahead JS Autocomplete Search Example

torque-programming 0

Laravel 10 Typeahead tutorial will show you how to use Typehead JS to create an autocomplete search feature in a

Laravel 10 Multiple Image Upload with Preview Torque Programming

Laravel 10 Multiple Image Upload with Preview

torque-programming 0

Laravel 10 Multiple, tutorial will teach you how to upload multiple images in Laravel 10. You will also learn how

Codeigniter Pagination Library Example Torque Programming

Codeigniter Pagination Library Example

torque-programming 0

Codeigniter Pagination – This tutorial will teach you how to create pagination links in CodeIgniter for your listings. We will

Leave a Reply

Your email address will not be published. Required fields are marked *