jQuery div flip animation on click with CSS and SASS not flipping correctly
<p>I searched a few similar questions but couldn't find a solution to my problem, so here it is.</p>

<p>I'm trying to just create a simple flip box.  </p>

<ol>
<li><p>Press the Box and flips to the back side.</p></li>
<li><p>Press the box again and flips back to the front side.</p></li>
</ol>

<p>My issue is that the flip looks bad, and once it flips to the back side, the flip card will not flip back to the front. I'm just starting to learn SASS and I'm making this flip card to gain some experience using SASS mixins.  I will be cleaning it up once I get it working.</p>

<p>Here is my current code.</p>

<p><strong>HTML:</strong></p>

<pre><code> &lt;div class="flip3D"&gt;
      &lt;div class="front"&gt;Front Box&lt;/div&gt;
      &lt;div class="back"&gt;Back Box&lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p>CSS (SASS):</p>

<pre><code>@mixin flipCard($width, $height, $color) {
  width: 0;
  height: 0;
  margin: 10px;
  //display: block;
  //display: inline-block;
  float: left;

  .front {
    position: absolute;
    -webkit-transform: perspective(600px) rotateY(0deg);
    transform: perspective(600px) rotateY(0deg);
    background: $color;
    width: $width;
    height: $height;
    border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: transform .5s linear 0s;
    transition: transform .5s linear 0s;    
    //z-index: 1002; 
  }

  .back {
    position: absolute;
    -webkit-transform: perspective(600px) rotateY(180deg);
    transform: perspective(600px) rotateY(180deg);
    background: $color - 40;
    width: $width;
    height: $height;
    border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: transform .5s linear 0s;
    transition: transform .5s linear 0s;    
    //z-index:1002;
  } 
}

.flip3D {
  @include flipCard(240px, 200px, white - 20);
}
</code></pre>

<p>jQuery:</p>

<pre><code>$(document).ready(function() {
  $(".flip3D").on('click', function() {
    if($(this).attr('data-click-state') == 1) {
        $(this).attr('data-click-state', 0)
        frontFlip();
    } else {
        $(this).attr('data-click-state', 1)
        backFlip();
    }
  });
});

function frontFlip() {
    $(".front")
    .css('transform', 'perspective(600px) rotateY(-180deg)')
    .css('-webkit-transform', 'perspective(600px) rotateY(-180deg)')
 }

function backFlip() {
    $(".back")
    .css('transform', 'perspective(600px) rotateY(0)')
    .css('-webkit-transform', 'perspective(600px) rotateY(0)')
}
</code></pre>