如何使用 HTML 和 CSS 创建 X 和 Y 轴翻转动画？

翻转动画是一种加载动画，我们使用方形翻转效果来给人加载动画的感觉。这些类型的动画在网站内容加载时间过长的时候很有用。此动画可以让访问者保持参与并防止他们在没有看到内容的情况下离开您的网页。这个动画背后的主要概念是变换和@keyframes 的应用。在尝试执行此代码之前，请仔细阅读它们。

HTML 代码::创建一个 HTML 文件并在其中创建一个 div。

  

    
    
    

  

    
        
GeeksforGeeks
         X and Y axis flip animation
        

    

  

CSS 代码：在 CSS 中，我们所做的第一件事是为主体提供背景。将背景应用于 div 和一些边框半径以获得圆角。应用名为 animate 的标识符的线性动画。使用关键帧，我们将动画应用于我们的标识符。我们在前半帧中沿 X 轴旋转，在静止时沿 Y 轴旋转。这不是必需的，但您可以更改旋转角度以获得不同类型的翻转效果。这是基本的翻转效果。

最终解决方案：它是HTML和CSS代码的组合。

  

    
    
    
    

  

    
        
GeeksforGeeks
         X and Y axis flip animation
        

    

  

输出：