html - CSS animation/transform going off screen -

i'm animating text each corner of screen. in every corner text rotated. problem here in top right , bottom left corner text goes off screen. i'm thinking has somethig rotation.

my question how can keep full text on screen correct position?

jsfiddle

#lorem {     font-size: 50px;     color: red;     position: absolute;     top: 5%;     left: 5%;     animation: switch 10s linear infinite; } @keyframes switch {     0% {         bottom:auto;         top:3%;         left: 3%;         right: auto;         animation-timing-function: steps(1, end);     }     25% {         left:auto;         right:3%;         bottom: auto;         top: 3%;         animation-timing-function: steps(1, end);         transform: rotate(90deg);     }     50% {         top:auto;         bottom:3%;         right: 3%;         left: auto;         animation-timing-function: steps(1, end);         transform: rotate(180deg);     }     75% {         right:auto;         left:3%;         top: auto;         bottom: 3%;         animation-timing-function: steps(1, end);         transform: rotate(-90deg);     } }  <span id="lorem">lorem</span> 

change transform 25% to

transform: rotate(90deg) translate(50px,0px); 

and 75% to

transform: rotate(-90deg) translate(50px,0px); 

fiddle