title: How to calculate rotation angle from rectangle points?
body: <p>I have 4 points <code>1</code>,<code>2</code>,<code>3</code>,<code>4</code> that closes a rectangle.</p>
  
  <p>The points are in a array in this following way: <code>x1</code> <code>y1</code> <code>x2</code> <code>y2</code> <code>x3</code> <code>y3</code> <code>x4</code> <code>y4</code></p>
  
  <p>The problem I have is that the rectangle can be rotated in a angle.</p>
  
  <p>How can I calculate the original points (gray outline), and the angle?</p>
  
  <p><img src="https://i.stack.imgur.com/fg3Gh.png" alt="enter image description here"></p>
  
  <p>I'm trying to reproduce this effect in javascript+css3-transform, so I need to first know the straight dimensions and then rotate with the css.</p>
  
  <p>I just know if the rectangle is straight by comparing points e.g. <code>y1==y2</code></p>
  
  <pre><code>if(x1==x4 &amp;&amp; x2==x3 &amp;&amp; y1==y2 &amp;&amp; y4==y3){
  
      rectangle.style.top = y1;
      rectangle.style.left = x1;
      rectangle.style.width = x2-x1;
      rectangle.style.height = y4-y1;
      rectangle.style.transform = "rotate(?deg)";
  
  }
  </code></pre>