title: How can I make box transition only for horizontal and vertical?
body: <p>I'm trying to make a box moving by horizontal and vertical on the arrows press. But when I pres for example <code>up arrow</code> and <code>right arrow</code> it goes by diagonal.
  Here is my <a href="https://codepen.io/YaroslavTER/pen/qBdMWgm" rel="nofollow noreferrer">codepen</a></p>
  
  <pre class="lang-css prettyprint-override"><code>.box {
    background-color: gray;
    height: 100px;
    width: 100px;
    transition: margin 0.5s cubic-bezier(0, .7, 0, 1);
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>const box = document.getElementsByClassName('box')[0];
  
  document.addEventListener('keydown', function({keyCode, which}) {
    const keycode = keyCode ? keyCode : which,
          startValue = '0px',
          shiftValue = '400px';
  
    console.log(box.style.marginLeft, box.style.marginTop)
    switch(keycode) {
      case(40):
        box.style.marginTop = shiftValue;
        break;
      case(39):
        box.style.marginLeft = shiftValue;
        break;
      case(38):
        box.style.marginTop = startValue;
        break;
      case(37):
        box.style.marginLeft = startValue;
        break;
    }
  });
  
  </code></pre>