How can I move a div with direction in JavaScript?

Question

There is a element in HMTL that I would like to move. It is simple. The problem is the element should move in specified degrees, for example 30° deg. How can I do that in JavaScript (and with CSS rotate)?

Thanks for all the answers.

Answer 1

Click somewhere. jsfiddle.net/o9zd5tvp/19/
Or Run snippet below.

Rotate only do rotation "in a place".

You can move only by changing position (left and top).
^{(each element in HTML is just a block at point x,y)}

Don't forget to set position: absolute in css to make div floatable.

---

var d = 30;
document.getElementById("div1").style.transform = "rotate("+0+"deg)";


var mx,my;
$( "body" ).bind( "mousemove", function(event) {
    mx = event.clientX;
    my = event.clientY;
});
var div = document.getElementById("div1");
$( "BODY" ).bind( "click", function(event) {
   $('#div1').animate({ 
       left: mx-32,
       top:  my-32,
   },300 + Math.random()*600)
});
setInterval(function(){
    var dx = mx - div.offsetLeft-32;
    var dy = my - div.offsetTop-32;
    var v1 = {x: div.offsetLeft+32, y: div.offsetTop+32}, 
        v2 = {x: mx, y: my};
    var angleDeg = Math.atan2(v2.y - v1.y, v2.x - v1.x) * 180 / Math.PI ;
    
    div.style.transform = "rotate("+angleDeg+"deg)";
    div.innerHTML = Number(angleDeg).toFixed(2);
},30);

.div1{
 border: 1px solid black;
 width: 64px;
 height: 64px;
    margin: 0px;
    left:50px;
    top:50px;
    position: absolute;
    display: inile-block;
    text-align:center;
}
BODY,HTML{width:100%;height:100%;a.padding:0px;margin:0px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click the mouse somewhere.
<div id="div1" class="div1">

Answer 2

function Moveit() {
  document.getElementById("div1").style.transform = "rotate(-30deg)";
}


function Moveit2() {
  document.getElementById("div1").style.transform = "rotate(30deg)";
}

http://jsfiddle.net/o9zd5tvp/16/

Answer 3

If I understand it well, you can use Math.cos and Math.sin to get the horizontal and vertical components of the desired vector, and then increase the top and left properties:

(function() {
  var box = document.getElementById('box'),
      top = 0,
      left = 0,
      angle = 30 * Math.PI / 180, // 30 degrees
      speed = 1,
      deltaX = Math.cos(angle) * speed,
      deltaY = Math.sin(angle) * speed;
  setInterval(function() {
    box.style.top = (top += deltaY) + 'px';
    box.style.left = (left += deltaX) + 'px';
  }, 60);
})();

#box {
  height: 50px;
  width: 50px;
  position: relative;
  background: blue;
}

<div id="box"></div>