How can i add a animation to a span using javascript when a letter is guessed correctly in a hangman game

Question

I am trying to add a animation to my game when a word is guessed correctly, the below code changes the spans background color to green when a letter is correct and on standard the background color is set to orange (#ff6a00). I have tried to add transform rotate 20 degrees but does not do anything the color property does change to green if the letter = the letter. I am trying to add it to the first if. I don't want the final result to be for it to rotate 20 degrees when the letter is correct, this is just to test if the way I was doing it would work. The end result I want it to flip like a card and slowly reveal the letter. Image of game

get puzzle() {
let puzzle = [];
if (puzzle != null) {
  this.word.forEach((letter) => {
    if (this.guessedLetters.includes(letter)) {
      puzzle.push({
        transform: "rotate(20deg)",
        letter: letter,
        color: "green",
      });
    } else if (letter === " ") {
      puzzle.push({
        letter: letter,
        color: "none",
      });
    } else {
      puzzle.push({
        letter: "*",
        color: "#ff6a00",
      });
    }
  });
  return puzzle;
}

}

Answer 1

You need to set a transition to animate your rotation, you can get examples here.

To support all modern browsers, the following styles should be used for transitions:

-webkit-transition
-moz-transition
transition

and for transforms:

-webkit-transform
-moz-transform
-ms-transform
transform

For example:

div {
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}

div:hover {
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
transform: translate(3em,0);
}