左右旋转未按预期工作

Question

我有一个 div ，我添加了两个跨度和一个按钮，这些跨度用于向左旋转和向右旋转 div 。右侧跨度称为向右旋转，左侧跨度称为向左旋转，它们是父级 div 的子级，称为 table。

<div id="table1" class="table square4 ui-draggable ui-draggable-handle" +="" style="inset:69px auto auto 445px;">
    <div class="removet"></div>
    <span class="fa fa-edit editdiv"></span>
    <span class="fa fa-rotate-left rotateleft"></span>
    <span class="fa fa-rotate-right rotateright"></span>
</div>

结果如下 div。

这也是 table 的 CSS，以防万一 Table 的 css 与我的 Transform 语句冲突。

.square4 {
  cursor: move;
  width: 133px;
  height: 133px;
  position: absolute !important;
  background-image: url(parts/table4.png);
  background-repeat: no-repeat;
  background-position: center center;
  font-size: 17px;
  font-weight: bold;
  color: #00f;
  border: 1px solid #ccc;
  border-radius: 6%;
  -moz-border-radius: 6%;
  -webkit-border-radius: 6%;
  left: 741px;
  top: -141px;
}

当用户向左或向右单击时，父级 div 应该旋转 15 度，但是当我单击向右旋转时没有任何反应，当我向左单击时它会将度数设置为旋转 0，这是第一个值而不是我需要的值。我将我的值设置为从 0 到 360 度的数组，每次单击向右旋转时它们会上升 15 度，如果单击向左旋转则返回 15 度。

div 使用 JQuery UI 附加到称为 mainarea 的可放置元素，这就是我使用 .on click 的原因。检测到点击，这只是我遇到问题的转换。

我检查了阵列和按钮点击以确保它们正常工作，我使用 console.log 检查角度 [当前] 并返回正确的值，我相信它与我的转换语句以及我是如何设置它的，我尝试了不同的方法但没有成功。

我正在使用 Elementor，所以我的 document.ready 与通常的方式有点不同，但这是因为 Elementor 的工作方式，如果您想测试它，您可以将其更改为准备就绪的文档语句，但我想显示我的确切代码。

document.addEventListener("DOMContentLoaded", function(event) 
{
    var angle = [0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210, 225, 240, 255, 270, 285, 300, 315 , 330, 345, 360];
    var current = 0;

   jQuery(document).on('click','.table > .rotateright',function(event)
    {
       current++;

        if(current == 25)
        {
            current = 0;
        }

       var r = jQuery(this).parents('.table').attr('id');

       var rotating = '#'.concat(r);

       console.log(angle[current]);

       jQuery(rotating).css({
          '-webkit-transform' : 'rotate(' + angle[current] + ')',
          '-moz-transform'    : 'rotate(' + angle[current] + ')',
          '-ms-transform'     : 'rotate(' + angle[current] + ')',
          '-o-transform'      : 'rotate(' + angle[current] + ')',
          'transform'         : 'rotate(' + angle[current] + ')'
        });
   });

    jQuery(document).on('click','.table > .rotateleft',function(event)
    {
        current--;

        if(current == -1)
        {
            current = 24;
        }

       var r = jQuery(this).parents('.table').attr('id');

       var rotating = '#'.concat(r);

        console.log(angle[current]);

       jQuery(rotating).css({
          '-webkit-transform' : 'rotate(' + angle[current] + ')',
          '-moz-transform'    : 'rotate(' + angle[current] + ')',
          '-ms-transform'     : 'rotate(' + angle[current] + ')',
          '-o-transform'      : 'rotate(' + angle[current] + ')',
          'transform'         : 'rotate(' + angle[current] + ')'
        });
    });
});

Answer 1

在分配新的旋转 CSS

时，您在 CSS 中缺少 'deg' ('+ angle[current]+' deg)

我只修改了右旋转的代码（我没有改左代码，可以像右一样改），这里see jsfiddle

小片段如下

 $('#table1').css({
               ' -webkit-transform': 'rotate('+ angle[current]+' deg)',
                '-moz-transform': 'rotate('+ angle[current]+' deg)',
                '-o-transform': 'rotate('+ angle[current]+'deg)',
                 '-ms-transform': 'rotate('+ angle[current]+'deg)',
                  'transform': 'rotate('+ angle[current]+'deg)'}
    );

并且右侧跨度将其保持在目标之外 div，因为它将作为主要 div 旋转

左右旋转未按预期工作

Rotate Left and Right Not Working as Expected

jquery

jquery-ui

transform

rotation