Why my div element of class square goes back to rotation 0 degree when i use transform property in my animaton

You have to apply all the transforms in a chain otherwise you will overwrite the initial transform. So in this case, you have to give it rotation as well as the scale.

50% {
  transform: rotate(-45deg) scale(0.5);
  background: yellow;
}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like