翻转窗口效果

翻转窗口是现代网页设计中使用的一种新效果。此效果用作展示部分、加载程序部分和显示横幅。该效果基于沿 X 轴和 Y 轴旋转的四个方块。旋转的顺序可以不同，即可以是 XX、XY、YX 或 YY。

方法：方法是创建 4 个相邻的正方形，形成一个大正方形（窗口）。然后使用@keyframes沿 X 轴和 Y 轴旋转这些小正方形。我们使用了 YX 的替代序列，即；第一次沿 Y 轴旋转，第二次沿 X 轴旋转，依此类推。

第一部分：在本节中，我们创建了四个包裹在“div”标签中的“span”标签。

• HTML代码：

  HTML

第二部分：对于 CSS，请按照以下给出的步骤操作。

• 步骤1：将“div”与页面中心对齐。
• 第 2 步：创建一个将 CSS 应用于“span”标签的正方形。
• 第 3 步：现在，使用“第 n 个孩子”属性将所有“跨度”彼此对齐
  形成一个更大的正方形。
• 第四步：给每个“跨度”涂上不同的颜色，让它看起来更漂亮。
• 第五步：使用@keyframes在Y轴和X轴上交替旋转小方块。

注意：轮换的顺序没有关系，你可以按照任何顺序。相同的动画可以应用于任何形状，但方形是最常用的一种。

• CSS 代码：

  .geeks 
    {
        position: absolute;
        top: 50%;
        left: 50%;
      }
   
      span {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #262626;
        animation: animate 4s infinite ease-in-out;
      }
      span:nth-child(1) {
        background-color: chocolate;
        left: -24px;
        top: -24px;
        animation-delay: 0.2s;
      }
   
      span:nth-child(2) {
        background-color: rgb(57, 30, 210);
        left: 0px;
        top: -24px;
        animation-delay: 0.4s;
      }
   
      span:nth-child(3) {
        background-color: rgb(36, 210, 30);
        left: -24px;
        top: 0px;
        animation-delay: 0.6s;
      }
   
      span:nth-child(4) {
        background-color: rgb(210, 30, 141);
        left: 0;
        top: 0;
        animation-delay: 0.8s;
      }
   
      @keyframes animate {
        0% {
          transform: rotateY(0deg);
        }
   
        20% {
          transform: rotateX(360deg);
        }
   
        40% {
          transform: rotateY(180deg);
        }
   
        60% {
          transform: rotateX(0deg);
        }
   
        80% {
          transform: rotateY(360deg);
        }
   
        100% {
          transform: rotateX(180deg);
        }
      }
  

完整代码：是以上两节的结合。

HTML

输出：