Working on a 3D box - css and js/jquery

JavaScript
1

I am trying to make a 3D box. What I have done is created four different colour boxes all in the same position and then when the button is clicked it will transform the colour to a different colour to look like it has flipped around like a 3D box. I can only do two slide/boxes to work but can’t to the third box/slide. I am having serious issues on this. Can someone please help me out here.

<script>

    $(document).ready(function() {
      $('.more').click(function() {
          $('.back').addClass('active')
          $('.front').removeClass('active')
      })
      $('.go-back').click(function() {
          $('.back').removeClass('active')
          $('.back-again').addClass('active')
      })
  })


</script>
<style>

    body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    min-height: 200px;

}

.card .front {
background: blue;
width: 200px;
height: 200px;
box-sizing: border-box;
transition: .5s;
transform-origin: right;
}

.more {
    width: 50%;
    text-align: right;
    cursor: pointer;
    float: right;
    font-size: 24px;
    color: #fff;
    display: block;
}


.card .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: yellow;
    box-sizing: border-box;
    transform-origin: left;
    transition: .5s;
    transform: translateX(100%) rotateY(90deg);
}

.card .back-again {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: red;
    box-sizing: border-box;
    transform-origin: left;
    transition: .5s;
    transform: translateX(0) rotateY(0deg);
}

    .go-back {
    font-size: 24px;
    color: #fff;
    text-align: right;
    cursor: pointer;
}


.card .back.active {
    transform: translateX(0) rotateY(0deg);
}

.card .front.active {
    transform: translateX(0) rotateY(0deg);
}

.card .front {
    transform: translateX(-100%) rotateY(90deg);
}

.card .back-again {
    transform: translateX(0) rotateY(90deg);
}



</style>

<div class="card">

    <div class="front active">
            <div class="more"><i class="fas fa-info-circle"></i></div>
    </div>
   
    <div class="back">
            <div class="go-back"><i class="fas fa-chevron-circle-left"></i></div>
</div>

<div class="back-again">
        <div class="go-go-back"><i class="fas fa-chevron-circle-left"></i></div>