Efecto de ventana invertida – Barcelona Geeks

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

HTML

HTML

Deja una respuesta Cancelar la respuesta