* {
  margin: 0;
  padding: 0;
}

section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.pattern {
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-animation: animatebg 10s ease-in-out infinite;
          animation: animatebg 10s ease-in-out infinite;
}

.pattern .face {
  position: relative;
  width: 100%;
  height: 50vh;
  background: url(assets/check.jpg);
  background-size: 100px 100px;
  -webkit-animation: animate 1s linear infinite;
          animation: animate 1s linear infinite;
}

.pattern .face.face2 {
  height: 100vh;
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transform: rotateX(70deg);
          transform: rotateX(70deg);
}

.pattern .face1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 125px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(transparent));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
}

.pattern .face2::before {
  content: '';
  position: absolute;
  bottom: top;
  left: 0;
  width: 100%;
  height: 125px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(transparent));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
}

@-webkit-keyframes animate {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100px;
  }
}

@keyframes animate {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100px;
  }
}

@-webkit-keyframes animatebg {
  0%, 100% {
    -webkit-transform: scale(1.6) rotate(-15deg);
            transform: scale(1.6) rotate(-15deg);
  }
  50% {
    -webkit-transform: scale(1.6) rotate(15deg);
            transform: scale(1.6) rotate(15deg);
  }
}

@keyframes animatebg {
  0%, 100% {
    -webkit-transform: scale(1.6) rotate(-15deg);
            transform: scale(1.6) rotate(-15deg);
  }
  50% {
    -webkit-transform: scale(1.6) rotate(15deg);
            transform: scale(1.6) rotate(15deg);
  }
}