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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Final solution: It is the combination of HTML and CSS codes.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.