In the CSS .style.transform function im trying to add the degrees to be 90 + MenuRotate which is a variable

user_19404828 0
Viewed 40

The code

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;
}

I would like to be able to add MenuRotate to the 90 degrees, not sure how i could do this so im looking for some answers

css html javascript
1 Answers

I read the article that the OP code is originally from and I believe it's overkill. What should be done to avoid so much work is to setup the elements angles initially so you know what to start from or reset the elements to 0.

Example A features a <form> that allows the user to rotate an element by adding positive and/or negative numbers (min -360, max 360).

Example B features a function that operates the same as the event handler (spin(e)) in Example A.

Details are commented in both examples

Example A

<form> as User Interface

// 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>

Example B

No <form>, Only a Function

// 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>

user_28132240
Related