title: Move in a 45 degree direction
body: <p>I am trying to trying to get all three of my images to fly off the screen in different 45 degree directions. Right now I have all of them flying off the screen to the left, but as I said I would like them to fly of in 45 degree directions. I have included the css, html, and the javascript that I have thus far. I am believing that the solution is a simple fix in the javascript but, I am not that well versed writing javascript to figure it out. If someone could please help me it would be appreciated. Thanks in advance... </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button onclick="slideIn('img6','img5','img2');"&gt;slide in&lt;/button&gt;
  &lt;button onclick="slideOut('img5','img6','img2');"&gt;slide out&lt;/button&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#img2{
      position:absolute;
      top:50%;
      left:50%;
      width:300px;
      height:119px;
      margin-top:250px;
      margin-left:-200px;
  }
  #img5{
      position:absolute;
      top:50%;
      left:50%;
      height:170px;
      width:333px;
      margin-top:130px;
      margin-left:72px;
  }
  #img6{
      position:absolute;
      top:50%;
      left:50%;
      height:184px;
      width:414px;
      margin-top:290px;
      margin-left:100px;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script&gt;
          function slideIn(skate,blanket,clothes){
              var elem = document.getElementById(skate);
              var elem1 = document.getElementById(blanket);
              var elem2 = document.getElementById(clothes);
                  elem.style.transition = "left 0.5s ease-in 0s";
                  elem.style.position="absolute";
                  elem.style.top = "50%";
                  elem.style.left = "50%";
                  elem.style.marginLeft = "100px";
                  elem.style.marginTop = "290px";
  
  
                  elem1.style.transition = "left 0.5s ease-in 0s";
                  elem1.style.position="absolute";
                  elem1.style.top = "50%";
                  elem1.style.left = "50%";
                  elem1.style.marginLeft = "72px";
                  elem1.style.marginTop = "130px";
  
                  elem2.style.transition = "left 0.5s ease-in 0s";
                  elem2.style.position="absolute";
                  elem2.style.top = "50%";
                  elem2.style.left = "50%";
                  elem2.style.marginLeft = "-200px";
                  elem2.style.marginTop = "250px";
  
  }
  
  
          function slideOut(skate,blanket,clothes){
              var elem = document.getElementById(skate);
              var elem1 = document.getElementById(blanket);
              var elem2 = document.getElementById(clothes);
  
                  elem.style.transition = "left 0.5s ease-out 0s";
                  elem.style.left = "-600px";
  
                  elem1.style.transition = "left 0.5s ease-out 0s";
                  elem1.style.left = "-1200px";
  
                  elem2.style.transition = "left 0.5s ease-out 0s";
                  elem2.style.left = "-1200px";
  
  
  }
          &lt;/script&gt;
  </code></pre>