为什么我的旋转元件之一朝着相反的方向？

Question

我正在创建一个类似于动画的轮子，其中12个元素围绕轴旋转。它工作得很好，除了一个元素在错误的方向上捕捉？我认为这是通过超过360度但我无法弄明白。

偶尔会有第一次过渡的跳跃，我不知道发生了什么。我已将转换持续时间减慢到1秒，因此您可以更清楚地查看旋转。

感谢任何帮助，谢谢！

＆＃13;

＆＃13;

function getRotationDegrees(obj) {
  var matrix = obj.css("-webkit-transform") ||
  obj.css("-moz-transform")    ||
  obj.css("-ms-transform")     ||
  obj.css("-o-transform")      ||
  obj.css("transform");
  if(matrix !== 'none') {
    var values = matrix.split('(')[1].split(')')[0].split(',');
    var a = values[0];
    var b = values[1];
    var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
  } else { var angle = 0; }
  return angle;
}

$(function(){
  $('.btn.up').on('click', function(){
    var spinR = $('.spinner-wrapper').width()/2;
    var array = [];
    $.each($('.spinner-item'), function(i){
      var rotate = getRotationDegrees($(this));
      var rotation = rotate - 30;
      array.push(rotation);
    }); // end each
    $.each($('.spinner-item'), function(j){
      $('.spinner-item').eq(j).css({
        'transform':'rotate('+array[j]+'deg) translateX('+spinR+'px)'
      });
    });
  }); // end click
}); // end ready

＆＃13;

/* utils */
/* layout */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

.site-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #282D33;
  display: flex;
  flex-direction: column; }

.site-header {
  position: relative;
  height: 50px;
  background: black;
  width: 100%; }

.site-main {
  position: relative;
  flex: 1;
  height: 100%;
  width: 100%; }

.site-footer {
  position: relative;
  width: 100%;
  height: 25px;
  background: black; }

.content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 40px; }

.btn {
  position: relative;
  margin: 10px 0 10px 300px;
  background: white;
  text-align: center;
  width: 70px;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer; }

.spinner-wrapper {
  position: relative;
  top: 37.5vh;
  -moz-transform: rotate(0deg) translate(-50%, -50%);
  -ms-transform: rotate(0deg) translate(-50%, -50%);
  -o-transform: rotate(0deg) translate(-50%, -50%);
  -webkit-transform: rotate(0deg) translate(-50%, -50%);
  transform: rotate(0deg) translate(-50%, -50%);
  left: 0;
  height: 75vh;
  width: 75vh;
  background: rgba(255, 0, 0, 0.1); }

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  border-radius: 50%; }

.spinner-item {
  position: absolute;
  height: 20px;
  width: 20px;
  line-height: 20px;
  background: white;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transition: all 1s ease; }
  .spinner-item:nth-of-type(1) {
    -moz-transform: rotate(0deg) translateX(37.5vh);
    -ms-transform: rotate(0deg) translateX(37.5vh);
    -o-transform: rotate(0deg) translateX(37.5vh);
    -webkit-transform: rotate(0deg) translateX(37.5vh);
    transform: rotate(0deg) translateX(37.5vh); }
  .spinner-item:nth-of-type(2) {
    -moz-transform: rotate(30deg) translateX(37.5vh);
    -ms-transform: rotate(30deg) translateX(37.5vh);
    -o-transform: rotate(30deg) translateX(37.5vh);
    -webkit-transform: rotate(30deg) translateX(37.5vh);
    transform: rotate(30deg) translateX(37.5vh); }
  .spinner-item:nth-of-type(3) {
    -moz-transform: rotate(60deg) translateX(37.5vh);
    -ms-transform: rotate(60deg) translateX(37.5vh);
    -o-transform: rotate(60deg) translateX(37.5vh);
    -webkit-transform: rotate(60deg) translateX(37.5vh);
    transform: rotate(60deg) translateX(37.5vh); }
  .spinner-item:nth-of-type(4) {
    -moz-transform: rotate(90deg) translateX(37.5vh);
    -ms-transform: rotate(90deg) translateX(37.5vh);
    -o-transform: rotate(90deg) translateX(37.5vh);
    -webkit-transform: rotate(90deg) translateX(37.5vh);
    transform: rotate(90deg) translateX(37.5vh); }
  .spinner-item:nth-of-type(5) {
    -moz-transform: rotate(120deg) translateX(37.5vh);
    -ms-transform: rotate(120deg) translateX(37.5vh);
    -o-transform: rotate(120deg) translateX(37.5vh);
    -webkit-transform: rotate(120deg) translateX(37.5vh);
    transform: rotate(120deg) translateX(37.5vh); }
  .spinner-item:nth-of-type(6) {
    -moz-transform: rotate(150deg) translateX(37.5vh);
    -ms-transform: rotate(150deg) translateX(37.5vh);
    -o-transform: rotate(150deg) translateX(37.5vh);
    -webkit-transform: rotate(150deg) translateX(37.5vh);
    transform: rotate(150deg) translateX(37.5vh); }
  .spinner-item:nth-of-type(7) {
    -moz-transform: rotate(180deg) translateX(37.5vh);
    -ms-transform: rotate(180deg) translateX(37.5vh);
    -o-transform: rotate(180deg) translateX(37.5vh);
    -webkit-transform: rotate(180deg) translateX(37.5vh);
    transform: rotate(180deg) translateX(37.5vh); }
  .spinner-item:nth-of-type(8) {
    -moz-transform: rotate(210deg) translateX(37.5vh);
    -ms-transform: rotate(210deg) translateX(37.5vh);
    -o-transform: rotate(210deg) translateX(37.5vh);
    -webkit-transform: rotate(210deg) translateX(37.5vh);
    transform: rotate(210deg) translateX(37.5vh); }
  .spinner-item:nth-of-type(9) {
    -moz-transform: rotate(240deg) translateX(37.5vh);
    -ms-transform: rotate(240deg) translateX(37.5vh);
    -o-transform: rotate(240deg) translateX(37.5vh);
    -webkit-transform: rotate(240deg) translateX(37.5vh);
    transform: rotate(240deg) translateX(37.5vh); }
  .spinner-item:nth-of-type(10) {
    -moz-transform: rotate(270deg) translateX(37.5vh);
    -ms-transform: rotate(270deg) translateX(37.5vh);
    -o-transform: rotate(270deg) translateX(37.5vh);
    -webkit-transform: rotate(270deg) translateX(37.5vh);
    transform: rotate(270deg) translateX(37.5vh); }
  .spinner-item:nth-of-type(11) {
    -moz-transform: rotate(300deg) translateX(37.5vh);
    -ms-transform: rotate(300deg) translateX(37.5vh);
    -o-transform: rotate(300deg) translateX(37.5vh);
    -webkit-transform: rotate(300deg) translateX(37.5vh);
    transform: rotate(300deg) translateX(37.5vh); }
  .spinner-item:nth-of-type(12) {
    -moz-transform: rotate(330deg) translateX(37.5vh);
    -ms-transform: rotate(330deg) translateX(37.5vh);
    -o-transform: rotate(330deg) translateX(37.5vh);
    -webkit-transform: rotate(330deg) translateX(37.5vh);
    transform: rotate(330deg) translateX(37.5vh); }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="site-wrapper">
  <main id="main" class="site-main">
    <div class="btn up">up</div>
    <div class="spinner-wrapper">
      <div class="spinner">
        <div class="spinner-item">1</div>
        <div class="spinner-item">2</div>
        <div class="spinner-item">3</div>
        <div class="spinner-item">4</div>
        <div class="spinner-item">5</div>
        <div class="spinner-item">6</div>
        <div class="spinner-item">7</div>
        <div class="spinner-item">8</div>
        <div class="spinner-item">9</div>
        <div class="spinner-item">10</div>
        <div class="spinner-item">11</div>
        <div class="spinner-item">12</div>
      </div>
    </div>
  </main>
</div>

＆＃13;

＆＃13;

＆＃13;