.css("transform") returns unexpected value matrix(1, 0, 0, 1, 0, 2000) instead of translateY(2000px)

Question

The jQuery function is suppose to transform the ".circle1" div up and down upon clicking "#ring" but unfortunately, it is not functioning. I can't seem to spot any errors so any help is appreciated. Thank you for your guidance.

//..HTML..//

<div class="circle1"><li class="products"><a href="#">Products</a></li></div>
<a><img id="ring" src="New Assets/ring5.png" alt=""></a>

//..CSS..//

.circle1 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #BBBBBB;
    transform: translateY(2000px);
}

#ring {
    background-size: contain;
    width: 50px;
    position: relative;
    top: 5px;
}

//..jQuery..//

 <script>
 $(document).ready(function() {
  $('#ring').click(function() {
    if ($('.circle1').css('transform') == 'translateY(2000px)')
      $('.circle1').css('transform':'translateY(400px)');
    else {
      $('.circle1').css('transform':'translateY(2000px)');
    };
  });
});
</script>

Answer 1

Checking transform property with jQuery.css() does not return the result you are expecting. Instead of translateY(2000px) it returns

matrix(1, 0, 0, 1, 0, 2000)

$(document).ready(function() {
  var $circle1 = $('.circle1');
  $('#ring').on("click", function() {
    console.log($circle1.css("transform"));
    if ($circle1.css('transform') == 'translateY(2000px)') {
      $circle1.css('transform', 'translateY(400px)');
    }
    else {
      $circle1.css('transform','translateY(2000px)');
    };
  });
});

.circle1 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #BBBBBB;
  transform: translateY(2000px);
}
#ring {
  background-size: contain;
  width: 50px;
  position: relative;
  top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="circle1">
  <li class="products"><a href="#">Products</a></li>
</ul>
<button id="ring">#ring</button>

Apart from that, when you want to set a css property with jQuery, it's either

.css('transform', 'translateY(400px)')

or

.css({ 'transform': 'translateY(400px)' })

but not

.css('transform':'translateY(400px)')

for setting css values.

https://api.jquery.com/css/#css2