## How to get the rotation of degree with getBoundingClientRect?

Tags: javascript,css

*Problem :*

In my game, you can click on the orange box (it's supposed to represent a monster). Upon clicking, a green line will be appended to the characters div. For example for a better explanation:

This is the code I'm using to generate the line:

```
l = document.createElement('div');
l.innerHTML='<div id="oLineBar" style=" transform: rotate('+RANDOM+'deg);" class="fadeIn2"><div id="lineBar" class="lineBarCharacter"></div></div>';
character.appendChild(l);
```

And the CSS for that is:

```
.lineBarCharacter{
height: 321px;
width: 2px;
background:rgba(39, 182, 0, 0.46)
}
#oLineBar {
position:absolute;
top:20px;
left:37px;
opacity:1;
transition: transform 1s linear;
transform-origin: top left;
transform-style: preserve-3D;
-webkit-transition: opacity 1s;
transition: opacity 1s;
-ms-transition-property: opacity, -ms-transform;
}
```

Now, I'm getting that orange boxes getboundingClientRect here:

```
ClientRect {height: 95, width: 88, left: 1250.5, bottom: 471, right: 1338.5…}bottom: 471height: 95left: 1250.5right: 1338.5top: 376width: 88
```

**My question is**: How do I determine the correct rotational degree, **based upon where that orange box is located at** (from the getboundingClientRect data)? Not just that specific orange box, but any data that is retrieved from getBoundingClientRect. If that makes sense.. I'm a bit lost, sorry in advance if this is confusing. I pretty much want that line to go into the same direction as where that orange box is.

*Solution :*

This is more of a math question rather than programming, but what you should basically do is is calculate the x and y differences between your character and its target, and then calculate the angle.

assuming `x1,y1`

are the character coords, and `x2,y2`

are the target coords:

`(x2-x1)`

will give the x difference,`(y2-y1)`

will give the y difference,`ArcTangent ( (y2-y1) / (x2-x1))`

will give you the angle in radians.`angleInRadians * (180/pi)`

will give you the angle in degrees.`4*ArcTangent(1)`

will give you`pi`

now in javascript:

```
var angle = Math.round(Math.atan((y2 - y1) / (x2 - x1)) * (180 / (4 * Math.atan(1))));
```

or as Maurice suggested, use

`Math.atan2`

`var angle = Math.round(Math.atan2(y2 - y1 , x2 - x1) * (180 / (4 * Math.atan(1))));`

**here is an example:**

```
$(function () {
$(document).on("mousemove", function (ev) {
var x1 = 200,
y1 = 200;
var x2 = ev.clientX,
y2 = ev.clientY;
var d = Math.sqrt(Math.pow((y2 - y1),2)+Math.pow((x2 - x1),2));
var angle = Math.round(Math.atan2((y2 - y1) , (x2 - x1)) * (180 / (4 * Math.atan(1))));
console.log(angle);
$("#line").css({
"transform":"rotate("+angle+"deg)",
"width":d+"px"
});
});
});
```

```
#line {
position:absolute;
left:200px;
top:200px;
width:200px;
height:5px;
background:green;
transform-origin: 0% 0%;
transform:rotate(45deg);
}
```

```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="line"></div>
```

here is a ` Fiddle` if you are on mobile.