How can you rotate a line like in four steps of 90 degrees until it goes back to its original positiob

Question

The output to be seen as line rotates the four steps

Answer 1

https://code.sololearn.com/WZOV4H5H01G2/?ref=app

Referance to study:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function