javascript - 在 CSS .style.transform 函数中，我试图将度数添加为 90 + MenuRotate，这是一个变量

Question

代码

function OpenMenu(){
 var MenuRotate = getCurrentRotation(document.getElementById("Menu-Icon"));
document.getElementById("menu").style.margin = "450px";
document.getElementById("Menu-Icon").style.transform ="rotate(90deg)";
var Menu1 = 1;
//alert(MenuRotate);

function getCurrentRotation(el){
  var st = window.getComputedStyle(el, null);
  var tm = st.getPropertyValue("-webkit-transform") ||
           st.getPropertyValue("-moz-transform") ||
           st.getPropertyValue("-ms-transform") ||
           st.getPropertyValue("-o-transform") ||
           st.getPropertyValue("transform") ||
           "none";
  if (tm != "none") {
    var values = tm.split('(')[1].split(')')[0].split(',');
    /*
    a = values[0];
    b = values[1];
    angle = Math.round(Math.atan2(b,a) * (180/Math.PI));
    */
    //return Math.round(Math.atan2(values[1],values[0]) * (180/Math.PI)); //this would return negative values the OP doesn't wants so it got commented and the next lines of code added
    var angle = Math.round(Math.atan2(values[1],values[0]) * (180/Math.PI));
    return (angle < 0 ? angle + 360 : angle); //adding 360 degrees here when angle < 0 is equivalent to adding (2 * Math.PI) radians before
  }
  return 0;
}

我希望能够将 MenuRotate 添加到 90 度，但不确定我该怎么做，所以我正在寻找一些答案

Answer 1

我读了article OP代码最初来 self 认为这是矫枉过正。为避免如此多的工作，应该做的是最初设置元素 Angular ，以便您知道从什么开始或将元素重置为 0。

示例 A 具有 <form>允许用户通过添加正数和/或负数(最小 -360，最大 360)来旋转元素。

示例 B 具有与示例 A 中的事件处理程序 (spin(e)) 相同的功能。

细节在两个例子中都有注释

例子A

<form>作为用户界面

// Bind <form> to the submit event
document.forms.spin.onsubmit = spin;

function spin(e) {
  // Stop normal behavior when submit is triggered
  e.preventDefault();
  // Reference all form controls
  const IO = this.elements;
  // Reference <output>
  const comp = IO.compass;
  // Reference <input>
  const turn = IO.turn;
  // Get <input> value and convert it into a number
  let deg = +turn.value;
  // Add comp value with turn value and assign to comp value
  comp.value = +comp.value +(deg);
  // If comp value is ever over 360, reset it
  if (+comp.value > 360) {
    comp.value = +comp.value - 360;
  }
  // .cssText is like .textContent for the style property
  comp.style.cssText = `transform: rotate(${comp.value}deg)`;
}

fieldset {
  display: flex;
  justify-content: center;
  align-items: center;
}

#turn {
  width: 3rem;
  text-align: center;
}

#compass {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(0, 0, 255, 0.3);
}

#compass::before {
  content: '➤';
  position: absolute;
  z-index: 1;
  transform: rotate(-90deg) translate(55%, -5%);
  transform-origin: center center;
  font-size: 3rem;
}

<form id='spin'>
  <fieldset>
    <input id='turn' type='number' min='-360' max='360' step='any'><input id='add' type='submit' value='Add'>
  </fieldset>
  <fieldset>
    <output id='compass' value='0'></output>
  </fieldset>
</form>

例子B

否 <form> , 只有一个函数

// Declare variable to track angle
let degree;

/**
* @desc - Rotates a given element by a given number of
*         degrees.
* @param {object<DOM>} node - The element to rotate
* @param {number} deg - The number of degrees to rotate
* @param {boolean} init - If true the element's rotate value
*         will be 0 and degree = 0 @default is false
*/
function turn(node, deg, init = false) {
  // If true reset node rotate and degree to 0
  if (init) {
    node.style.cssText = `transform: rotate(0deg)`;
    degree = 0;
  }
  /*
  Simple arithmatic
  Reset degrees when more than 360
  */
  degree = degree + deg;
  if (degree > 360) {
    degree = degree - 360;
  }
  // .cssText is like .textContent for the style property
  node.style.cssText = `transform: rotate(${degree}deg)`;
  console.log(node.id + ': ' + degree);
}

const c = document.getElementById('compass');
turn(c, 320, true);

fieldset {
  display: flex;
  justify-content: center;
  align-items: center;
}

#compass {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(0, 0, 255, 0.3);
}

#compass::before {
  content: '➤';
  position: absolute;
  z-index: 1;
  transform: rotate(-90deg) translate(55%, -5%);
  transform-origin: center center;
  font-size: 3rem;
}

<fieldset>
  <output id='compass' value='0'></output>
</fieldset>