How to create X and Y axis flip animation using HTML and CSS ? Last Updated : 12 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. html <!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. CSS <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. html <!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: Comment More infoAdvertise with us Next Article How to Create Border Animation using CSS? S sirohimukul1999 Follow Improve Article Tags : Web Technologies Web Templates CSS-Properties CSS-Questions Similar Reads How to create Animated bars using HTML and CSS? Dancing bars are one of the classical components that are used in making a good looking website. They are very simple to implement and can be used as a loader or an animation while recording sound. Approach: The approach is to use unordered list to create bars and then animate them using keyframes. 2 min read How to create Shaky button using HTML and CSS? To create a shaky button using HTML and CSS involves adding an animation effect to a button element, making it appear to shake when interacted with. This effect can be used to draw attention to buttons, such as a snooze button or a button requiring immediate action. ApproachHTML page structure is de 2 min read How to create Frame by Frame Animation using CSS and JavaScript ? Frame by frame animation is a technique where a set of images are shown, one by one in a particular order, maintaining fixed time interval gaps between two consecutive images, to make an illusion of motion to the eyes. Now, in a more technical way, we can say that frame-by-frame animation is a techn 2 min read How to Create Border Animation using CSS? Creating a border animation using CSS involves utilizing hover effects to dynamically alter the appearance of an element's borders when interacted with. This technique leverages CSS pseudo-elements, combined with hover selectors, to achieve animated border transformations based on user interaction. 2 min read How to Create Border Animation using CSS? Creating a border animation using CSS involves utilizing hover effects to dynamically alter the appearance of an element's borders when interacted with. This technique leverages CSS pseudo-elements, combined with hover selectors, to achieve animated border transformations based on user interaction. 2 min read Creating a 3D Flip button using HTML and CSS Creating 3D effects is one of the most demanding needs in web designing. In this article, we will learn to implement 3D Flip button animation effect using simple HTML and CSS. Â In this effect, whenever the user hovers over a button, it will show an animation of a flip with a 3D look. HTML Code: In t 2 min read Like