I have a challenge with animating text to each corner of the screen, where the text is rotated in every corner. However, I am facing an issue where the text goes off-screen in the top right and bottom left corners. It seems like the rotation might be causing this problem.
My question is: How can I ensure that the full text stays on the screen in the correct position?
#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>