Efecto de ventana invertida

Flipping window es un nuevo efecto que se utiliza en los diseños web modernos. Este efecto se utiliza como parte de escaparate, parte de carga y banner revelador. El efecto se basa en cuatro cuadrados que giran a lo largo de los ejes X e Y. El orden de rotación puede ser diferente, es decir, puede ser XX, XY, YX o YY.

Enfoque: el enfoque es crear 4 cuadrados alineados uno al lado del otro formando un gran cuadrado (ventana). Luego, use @keyframes para rotar estos pequeños cuadrados a lo largo de los ejes X e Y. Hemos utilizado la secuencia alternativa de YX, es decir; la primera rotación a lo largo del eje Y y la segunda a lo largo del eje X y así sucesivamente.

Primera sección: en esta sección, hemos creado cuatro etiquetas «span» envueltas dentro de una etiqueta «div».

  • Código HTML:

    HTML

    <!DOCTYPE html>
    <html>
        <head>
            <title>Flipping Window Effect</title>
        </head>
        <body>
            <div class="geeks">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </body>
    </html>

Segunda sección: para CSS, siga los pasos que se indican a continuación.

  • Paso 1: alinee el «div» con el centro de la página.
  • Paso 2: crea un cuadrado aplicando CSS a la etiqueta «span».
  • Paso 3: Ahora, usa la propiedad «nth child» para alinear todos los «tramos» uno al lado del otro
    formando un cuadrado más grande.
  • Paso 4: Aplique diferentes colores a cada «tramo» para que se vea más hermoso.
  • Paso 5: use @keyframes para rotar cuadrados pequeños alternativamente en los ejes Y y X.

Nota: El orden de rotación no importa, puedes seguir cualquier orden. La misma animación se puede aplicar a cualquier forma, pero la cuadrada es la más utilizada.

  • Código 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);
          }
        }

Código Completo: Es la combinación de los dos apartados anteriores.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Flipping Window Effect</title>
  <style>
  .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);
        }
      }
    
  </style>
</head>
<body>
  <div class="geeks">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *