How to animate a rolling rectangle

Question

I'd like to animate a rectangle to roll from the left of the screen to the right of the screen. Please notice that the transform-origin point should not be in the center of the rectangle, but in the bottom-right corner, so that it doesn't overpass the "hr" line or bounce in any way.

This is what I have achieved untill now, but I'd like it to move continuously untill it gets to the right edge of the screen:

hr {
  margin: 0;
}

div {
  width: 135px;
  height: 135px;
  box-shadow: inset 0 0 10px #000000;
  transform-origin: right bottom;
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

<div></div>
<hr>

Answer 1

You need to change the transform origin as you go :

hr {
  margin: 0;
}

div {
  width: 135px;
  height: 135px;
  box-shadow: inset 0 0 10px #000000;
  transform-origin: right bottom;
  animation-name: move;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  margin-top: 20px;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  transform-origin: right bottom;
  }
  25% {
    transform: rotate(90deg);
  transform-origin: right bottom;
  }
  25.1% {
    transform:   translate(100%, 100%) rotate(90deg);
    transform-origin: top right;
  }
  50% {
    transform:  translate(100%, 100%) rotate(180deg);
    transform-origin: top right;
  }
  50.1% {
    transform: translate(300%, 100%) rotate(180deg);
    transform-origin: left top;
  }
  75% {
    transform: translate(300%, 100%) rotate(270deg);
    transform-origin: left top;
  }
  75.1% {
    transform: translate(400%, 0%) rotate(270deg);
    transform-origin: left bottom;
  }
  100% {
    transform: translate(400%, 0%) rotate(360deg);
    transform-origin: left bottom;
  }
}

<div>TEST</div>
<hr>