html efecto：muro de locetas en mosaico que se mueven solas

Posted 2021-05-11

body, html {
  height: 100%;
}

body {
  background: #252527;
  font-family: "Open Sans", sans-serif;
  padding: 1rem;
}

.row {
  margin-bottom: 1rem;
}

/* Aspect Ratio
----------------------*/
.one-one {
  position: relative;
}
.one-one:before {
  display: block;
  content: " ";
  width: 100%;
  padding-top: 410px;
  /* en vez de 410px, puedes usar 56.25%
  para que cada loceta tenga la proporcion
  de 16:9  
    Ratio of 16:9 (16w:9h)
   * (h / w) * 100 = %
   * (9 / 16) * 100 = %
   * 0.5625 * 100 = 56.25%
   * 1:1 = 100%
   */
}
/* Flippers
----------------------*/
/* Container */
.tile-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  transition: 0.6s;
  transform-style: preserve-3d;
  
  /* Optional animation */
  animation: flip 12s infinite;
}

/* Optional animation */
.row:nth-child(odd) .col-xs-4:nth-child(even) .content {
  animation-delay: 5s;
}

/* Optional animation */
.row:nth-child(even) .col-xs-4:nth-child(odd) .content {
  animation-delay: 5s;
}

.tile-content:hover {
  transform: rotateY(180deg);
}

/* Faces */
.tile-front,
.tile-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
}

.tile-front {
  background-color: tomato;
  z-index: 2;
  transform: rotateY(0deg);
}

.tile-back {
  background-color: skyblue;
  transform: rotateY(-180deg);
}

/* Flipper Content
----------------------*/
.tile-back-1 {
  background-image: url("https://www.sarasoueidan.com/demos/windows8-animations/images/blue.jpg");
  background-size: cover;
  
}

span {
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  z-index:10;
}

/* Optional Animation
----------------------*/
@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  
  40% {
    transform: rotateY(0deg);
  }
  
  50% {
    transform: rotateY(-180deg);
  }
  
  90% {
    transform: rotateY(-180deg);
  }
  
  100% {
    transform: rotateY(0deg);
  }
}




/******************************************
 Animate.CSS By Dan Eden
******************************************/

.animatedgroup{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInX;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInX;
	backface-visibility: visible !important;
	animation-name: flipInX;
}

<div id="tiles-container" class="container">
  
  <div class="row">

    <div class="col-xs-8 animatedgroup flipInX">
      <div class="box one-one">
        <div class="tile-content">
          
          <div class="tile-front tile-back-1">
            <span>front</span>
          </div>
          
          <div class="tile-back">
            <span>back</span>
          </div>
          
        </div>
      </div>
    </div>
    
   
    <div class="col-xs-4 animatedgroup flipInX">
      <div class="box one-one">
        <div class="tile-content">
          
          <div class="tile-front">
            <span>front</span>
          </div>
          
          
          <div class="tile-back">
            <span>back</span>
          </div>
          
        </div>
      </div>
    </div>
    
  </div>
  
  <div class="row">

    <div class="col-xs-4 animatedgroup flipInX">
      <div class="box one-one">
        <div class="tile-content">
          
          <div class="tile-front">
            <span>front</span>
          </div>
          
          <div class="tile-back">
            <span>back</span>
          </div>
          
        </div>
      </div>
    </div>
    
    <div class="col-xs-8 animatedgroup flipInX">
      <div class="box one-one">
        <div class="tile-content">
          
          <div class="tile-front">
            <span>front</span>
          </div>
          
          <div class="tile-back">
            <span>back</span>
          </div>
          
        </div>
      </div>
    </div>
    
    
  </div>
  
</div>