根据当前的旋转顺时针或逆时针旋转div

Question

我有一组排列成圆形的按钮，右侧的按钮是active按钮并发出脉冲动画。 单击另一个按钮时，包含的div将旋转，以便您单击的按钮位于右侧，并成为active按钮

这是使用CSS transform: rotate(x); 和transition

当我点击下面标有'C'的图像时，我希望div顺时针旋转，'A'逆时针旋转。 但是这不会发生，因为我已经完成了CSS旋转，假设圆圈旋转了-300度然后变为180度旋转，它将旋转“长距离旋转”而不是采用最短路径。

我需要使用JavaScript旋转div，然后根据我点击的按钮添加或减去旋转中的值。 我已经尝试过寻找方法，但到目前为止还没有运气。

这是一个显示我目前进展的小提琴

Answer 1

您可以向按钮添加data-rotate属性。 它们的值将用于当前旋转值的加或减 。
默认HTML：

<div class="col-lg" id="wheel-container">
  <div class="wheel" data-state="1">
    <ul>
      <li><div><a class="btn active" data-icon="1"><div></div></a></div></li>
      <li><div><a class="btn" data-icon="2" data-rotate="-60"><div></div></a></div></li>
      <li><div><a class="btn" data-icon="3" data-rotate="-120"><div></div></a></div></li>
      <li><div><a class="btn" data-icon="4" data-rotate="180"><div></div></a></div></li>
      <li><div><a class="btn" data-icon="5" data-rotate="120"><div></div></a></div></li>
      <li><div><a class="btn" data-icon="6" data-rotate="60"><div></div></a></div></li>
    </ul>
  </div>
</div>

删除这部分CSS。 你不再需要它：

/* .wheel[data-state="1"] {
    transform: rotateZ(0deg);
}
.wheel[data-state="2"] {
    transform: rotateZ(-60deg);
}
.wheel[data-state="3"] {
    transform: rotateZ(-120deg);
}
.wheel[data-state="4"] {
    transform: rotateZ(180deg);
}
.wheel[data-state="5"] {
    transform: rotateZ(120deg);
}
.wheel[data-state="6"] {
    transform: rotateZ(60deg);
} */

现在，jQuery代码。 它检查单击元素的data-rotate值，以从rotate变量中添加/减去该值。 然后，它检查位置，并为每个data-rotate重新分配值data-rotate适当地data-rotate 。

var btns = $('.btn');
var rotate = 0;

$('.btn').on('click', function(e){
  e.preventDefault();
  if ($(this).hasClass('active')) {
    //Do nothing
  } else {

    var rotateAdd = Number($(this).data('rotate'));
    rotate += rotateAdd;
    $('.wheel').css({'transform' : 'rotate(' + rotate + 'deg)'});

    // get n value
    var icon = $(this).data('icon');
    var n = icon - 1;

    // loop to rearrange the values
    for (var i = 1; i < btns.length; i++) {
       n++;
       if (n === btns.length) {
          n = 0;
       }

      // apply rotate data again
       if (i == 1) {
         $(btns[n]).data('rotate', '-60');
       } else if (i == 2) {
         $(btns[n]).data('rotate', '-120');
       } else if (i == 3) {
         $(btns[n]).data('rotate', '180');        
       } else if (i == 4) {
         $(btns[n]).data('rotate', '120');     
       } else if (i == 5) {
         $(btns[n]).data('rotate', '60');
       }

    }

    // Hide other dropdowns
    $('.active').removeClass('active');
    // Open this dropdown
    $(this).addClass('active');
  }

});

工作片段：

 var btns = $('.btn'); var rotate = 0; $('.btn').on('click', function(e) { e.preventDefault(); if ($(this).hasClass('active')) { //Do nothing } else { var rotateAdd = Number($(this).data('rotate')); rotate += rotateAdd; $('.wheel').css({ 'transform': 'rotate(' + rotate + 'deg)' }); // get n value var icon = $(this).data('icon'); var n = icon - 1; // loop to rearrange the values for (var i = 1; i < btns.length; i++) { n++; if (n === btns.length) { n = 0; } // apply rotate data again if (i == 1) { $(btns[n]).data('rotate', '-60'); } else if (i == 2) { $(btns[n]).data('rotate', '-120'); } else if (i == 3) { $(btns[n]).data('rotate', '180'); } else if (i == 4) { $(btns[n]).data('rotate', '120'); } else if (i == 5) { $(btns[n]).data('rotate', '60'); } } // Hide other dropdowns $('.active').removeClass('active'); // Open this dropdown $(this).addClass('active'); } }); 

 #wheel-container { flex: 1 1 100%; max-width: 100%; position: relative; } .wheel { width: calc(50vw - 1.875rem); position: relative; margin: auto; } .wheel ul { list-style: none; padding: 0; margin: 0; width: 100%; padding-top: 100%; position: relative; } .wheel ul li { padding: 0; margin: 0; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform-origin: 0 50%; } .wheel ul li>div { width: 100%; height: 100%; position: relative; } .wheel ul li [data-icon] { width: 50%; height: 50%; border-radius: 50%; position: absolute; right: 0; top: 50%; transform-origin: 50% 50%; transform: translateY(-50%); cursor: pointer; padding: 0; } .wheel ul li [data-icon]>div { width: 100%; height: 100%; position: relative; overflow: visible; z-index: -10; } .wheel ul li [data-icon]>div::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; } .wheel ul li [data-icon].active>div::before { content: ''; position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; background: rgba(0, 173, 239, 0.5); transform: translate(-50%, -50%); animation-name: pulse; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 3s; animation-direction: alternate; border-radius: 50%; } @keyframes pulse { 0% { width: 100%; height: 100%; opacity: 0; } 50% { width: calc(100% + 1rem); height: calc(100% + 1rem); opacity: 1; } 100% { width: 100%; height: 100%; opacity: 0; } } .wheel ul li:nth-child(1) { transform: translateY(-50%); } .wheel ul li:nth-child(2) { transform: translateY(-50%)rotateZ(60deg); } .wheel ul li:nth-child(3) { transform: translateY(-50%)rotateZ(120deg); } .wheel ul li:nth-child(4) { transform: translateY(-50%)rotateZ(180deg); } .wheel ul li:nth-child(5) { transform: translateY(-50%)rotateZ(240deg); } .wheel ul li:nth-child(6) { transform: translateY(-50%)rotateZ(300deg); } .wheel[data-state] { transition: transform 1s ease-in-out; transform-origin: 50% 50%; } .wheel[data-state="1"] { transform: rotateZ(0deg); } .wheel[data-state="2"] { transform: rotateZ(-60deg); } .wheel[data-state="3"] { transform: rotateZ(-120deg); } .wheel[data-state="4"] { transform: rotateZ(180deg); } .wheel[data-state="5"] { transform: rotateZ(120deg); } .wheel[data-state="6"] { transform: rotateZ(60deg); } .wheel ul li:nth-child(1) [data-icon]>div::after { background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat; } .wheel ul li:nth-child(2) [data-icon]>div::after { background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat; transform: rotateZ(-60deg); } .wheel ul li:nth-child(3) [data-icon]>div::after { background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat; transform: rotateZ(-120deg); } .wheel ul li:nth-child(4) [data-icon]>div::after { background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat; transform: rotateZ(-180deg); } .wheel ul li:nth-child(5) [data-icon]>div::after { background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat; transform: rotateZ(-240deg); } .wheel ul li:nth-child(6) [data-icon]>div::after { background: url('https://www.fillmurray.com/200/200') 0 0 / contain no-repeat; transform: rotateZ(-300deg); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg" id="wheel-container"> <div class="wheel" data-state="1"> <ul> <li> <div> <a class="btn active" data-icon="1"> <div></div> </a> </div> </li> <li> <div> <a class="btn" data-icon="2" data-rotate="-60"> <div></div> </a> </div> </li> <li> <div> <a class="btn" data-icon="3" data-rotate="-120"> <div></div> </a> </div> </li> <li> <div> <a class="btn" data-icon="4" data-rotate="180"> <div></div> </a> </div> </li> <li> <div> <a class="btn" data-icon="5" data-rotate="120"> <div></div> </a> </div> </li> <li> <div> <a class="btn" data-icon="6" data-rotate="60"> <div></div> </a> </div> </li> </ul> </div> </div>