How to create X and Y axis flip animation using HTML and CSS ? - GeeksforGeeks

27 Apr, 2020
The flip animation is the kind of loading animation in which we use a square flip effect to give the feel of loading animation. These kinds of animations are useful in times when the content of the website is taking too long to load. This animation can keep visitors engage and prevent them from leaving your web page without seeing the content. The main concept behind working of this animation is the application of transform and @keyframes. Please go through them before you try to execute this code.
HTML Code:: Create a HTML file and create a div in it.
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport"           content="width=device-width, initial-scale=1.0" />    <title>X and Y axis flip animation</title></head>  <body>    <center>        <h1>GeeksforGeeks</h1>        <b> X and Y axis flip animation</b>        <div class="geeks"></div>    </center></body>  </html>
CSS Code: In CSS, the first thing that we have done is provide a background to the body. Apply background to the div and some border-radius to have a rounded corner. Apply linear animation with identifier named as animate. Using key-frames we will apply animation to our identifier. We are rotating are square along X-axis during the first half frames and along Y-axis during rest. This is not required but you can change the angles of rotation to have a different kind of flip effect. This one is the basic flip effect.
<style>    body {        margin: 0;        padding: 0;    }      h1 {        color: green;    }      .geeks {        position: absolute;        top: 45%;        left: 50%;        transform: translate(-50%, -50%);        width: 100px;        height: 100px;        background: green;        border-radius: 13px;        animation: animate 2s linear infinite;    }      @keyframes animate {        0% {            transform: translate(-50%, -50%)                        perspective(200px)                        rotateX(0deg)                        rotateY(0deg);        }          50% {            transform: translate(-50%, -50%)                        perspective(200px)                        rotateX(-180deg)                        rotateY(0deg);        }          100% {            transform: translate(-50%, -50%)                        perspective(200px)                        rotateX(-180deg)                        rotateY(-180deg);        }    }</style>
Final solution: It is the combination of HTML and CSS codes.
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport"           content="width=device-width, initial-scale=1.0" />    <title>X and Y axis flip animation</title>    <style>        body {            margin: 0;            padding: 0;        }                  h1 {            color: green;        }        .geeks {            position: absolute;            top: 45%;            left: 50%;            transform: translate(-50%, -50%);            width: 100px;            height: 100px;            background: green;            border-radius: 13px;            animation: animate 2s linear infinite;        }                  @keyframes animate {            0% {                transform: translate(-50%, -50%)                   perspective(200px)                   rotateX(0deg)                   rotateY(0deg);            }            50% {                transform: translate(-50%, -50%)                  perspective(200px)                   rotateX(-180deg)                   rotateY(0deg);            }            100% {                transform: translate(-50%, -50%)                  perspective(200px)                   rotateX(-180deg)                  rotateY(-180deg);            }        }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</h1>        <b> X and Y axis flip animation</b>        <div class="geeks"></div>    </center></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
CSS-Properties
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?