title: Collision Detection between images rotated using CSS animations
body: <p>I'm using CSS animations and jQuery to move cars in a crossroads (top point of view) to simulate a driving license quiz. The user has to choose the crossing order by clicking over the cars.</p>
  
  <p>Sample Image: <img src="https://i.stack.imgur.com/htIet.jpg" alt="http://i40.tinypic.com/717fc9.jpg"></p>
  
  <p>Each car has properties and an animation like this for example: blue car turning RIGHT (different from image):</p>
  
  <pre><code>#auto-b {
      left: 320px;
      top: 150px;
      -webkit-transform: rotate(180deg);
  }
  
  .animated #auto-b {
      -webkit-animation-name: move-b;
      -webkit-animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes move-b {
  
      30% {
          left: 260px;
          top: 150px;
          -webkit-transform: rotate(180deg);
      }
      60% {
          left: 214px;
          top: 120px;
          -webkit-transform: rotate(270deg);
      }
  
      100% {
          top: 30px;
          left: 214px;
          -webkit-transform: rotate(270deg);
      }
  }
  </code></pre>
  
  <p><strong><em>The thing I'm not figuring out is how can I detect if two cars collide since they are rotated (turning).</em></strong></p>
  
  <p>Play button function:</p>
  
  <pre><code>$('#play').on('click', play);
  
  function play(){    
      $('.auto').removeClass('selected');
      $('#incrocio').addClass('animated');    
      interval = setInterval(crash,1);
  }
  </code></pre>
  
  <p>Crash function (only work with red and green cars collision because they don't rotate):</p>
  
  <pre><code>function crash(){
  
      var autoA = $('#auto-a').position();    
      var autoB = $('#auto-b').position();
      var autoC = $('#auto-c').position();    
      var top1 = autoA.top+10;
      var top2 = autoA.top-10;
      var left1 = autoA.left+10;
      var left2 = autoA.left-10;  
  
      if (top1 &gt; autoC.top &amp;&amp; top2 &lt; autoC.top &amp;&amp; left1 &gt; autoC.left &amp;&amp; left2 &lt; autoC.left) {
          console.log("boom");
          $('#incrocio').removeClass('animated');
          alert("BOOM!");
          i = 1;
          carsArray = [];
          clearInterval(interval);
      }
  }
  </code></pre>
  
  <p>Is there an easy way to detect any kind of collision between every image that has class ".auto"?</p>
  
  <p>I also thought about calculating every point of the rectangle and checking if any of them is inside an other rectangle (car). <strong>However I can only get the top-left point and not the others</strong>.</p>
  
  <p>Any solutions?</p>
  
  <p>Thanks in advance!</p>