<style>
  .card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-height: 100%;
    height: 100%;
  }
  .cardTop {
    vertical-align: middle;
    display: flex;
    max-height: 400px;
    height: 50%;
  }

  .cardBottom {
    vertical-align: middle;
    display: flex;
    left: 50%;
    height: 50%;
  }

  .card__inner1T {
    width: 29%;
    transition: transform 2s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
  }
  .card__inner2T {
    width: 50%;
    transition: transform 2s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
  }
  .card__inner3T {
    width: 23%;
    transition: transform 2s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
  }
  .card__inner1T.is-flipped {
    transform: rotateX(180deg);
  }
  .card__inner2T.is-flipped {
    transform: rotateX(180deg);
  }
  .card__inner3T.is-flipped {
    transform: rotateX(180deg);
  }

  .card__inner1B {
    width: 50%;
    transition: transform 2s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
  }
  .card__inner2B {
    width: 28%;
    transition: transform 2s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
  }
  .card__inner3B {
    width: 23%;
    transition: transform 2s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
  }
  .card__inner1B.is-flipped {
    transform: rotateX(180deg);
  }
  .card__inner2B.is-flipped {
    transform: rotateX(180deg);
  }
  .card__inner3B.is-flipped {
    transform: rotateX(180deg);
  }

  .card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
  }

  .card__face--front {
    background-color: var(--light);
  }

  .card__face--front h2 {
    color: #fff;
    font-size: 32px;
  }

  .card__face--back {
    background-color: var(--light);
    transform: rotateX(180deg);
  }
</style>

<div class="card">
  <div class="cardTop">
    <div class="card__inner1T">
      <div class="card__face card__face--front">
        <img
          width="100%"
          height="100%"
          src="https://poocho-site-images.s3.amazonaws.com/1Y.png"
          alt=""
        />
      </div>
      <div class="card__face card__face--back">
        <img
          width="100%"
          height="100%"
          src="https://poocho-site-images.s3.amazonaws.com/1X.png"
          alt=""
        />
      </div>
    </div>
    <div class="card__inner2T">
      <div class="card__face card__face--front">
        <img
          width="100%"
          height="100%"
          src="https://poocho-site-images.s3.amazonaws.com/2Y.png"
          alt=""
        />
      </div>
      <div class="card__face card__face--back">
        <img
          width="100%"
          height="100%"
          src="https://poocho-site-images.s3.amazonaws.com/2X.png"
          alt=""
        />
      </div>
    </div>
    <div class="card__inner3T">
      <div class="card__face card__face--front">
        <img
          width="100%"
          height="100%"
          src="https://poocho-site-images.s3.amazonaws.com/3Y.png"
          alt=""
        />
      </div>
      <div class="card__face card__face--back">
        <img
          width="100%"
          height="100%"
          src="https://poocho-site-images.s3.amazonaws.com/3X.png"
          alt=""
        />
      </div>
    </div>
  </div>

  <div class="cardBottom">
    <div class="card__inner1B">
      <div class="card__face card__face--front">
        <img
          width="100%"
          height="100%"
          src="https://poocho-site-images.s3.amazonaws.com/4Y.png"
          alt=""
        />
      </div>
      <div class="card__face card__face--back">
        <img
          width="100%"
          height="100%"
          src="https://poocho-site-images.s3.amazonaws.com/4X.png"
          alt=""
        />
      </div>
    </div>
    <div class="card__inner2B">
      <div class="card__face card__face--front">
        <img
          width="100%"
          height="100%"
          src="https://poocho-site-images.s3.amazonaws.com/5Y.png"
          alt=""
        />
      </div>
      <div class="card__face card__face--back">
        <img
          width="100%"
          height="100%"
          src="https://poocho-site-images.s3.amazonaws.com/5X.png"
          alt=""
        />
      </div>
    </div>
    <div class="card__inner3B">
      <div class="card__face card__face--front">
        <img
          width="100%"
          height="100%"
          src="https://poocho-site-images.s3.amazonaws.com/6Y.png"
          alt=""
        />
      </div>
      <div class="card__face card__face--back">
        <img
          width="100%"
          height="100%"
          src="https://poocho-site-images.s3.amazonaws.com/6X.png"
          alt=""
        />
      </div>
    </div>
  </div>
</div>

<script>
  function randomSeconds() {
    var min = 3,
      max = 10;
    var rand = Math.random() * (max - min + 1) + min; //Generate Random number between 5 - 10
    console.log("Wait for " + rand + " seconds");
    return rand * 1000;
  }

  const card1T = document.querySelector(".card__inner1T");
  const card2T = document.querySelector(".card__inner2T");
  const card3T = document.querySelector(".card__inner3T");
  const card1B = document.querySelector(".card__inner1B");
  const card2B = document.querySelector(".card__inner2B");
  const card3B = document.querySelector(".card__inner3B");

  setInterval(function (e) {
    card1T.classList.toggle("is-flipped");
  }, randomSeconds());

  setInterval(function (e) {
    card2T.classList.toggle("is-flipped");
  }, randomSeconds());

  setInterval(function (e) {
    card3T.classList.toggle("is-flipped");
  }, randomSeconds());

  setInterval(function (e) {
    card1B.classList.toggle("is-flipped");
  }, randomSeconds());

  setInterval(function (e) {
    card2B.classList.toggle("is-flipped");
  }, randomSeconds());

  setInterval(function (e) {
    card3B.classList.toggle("is-flipped");
  }, randomSeconds());
</script>