-webkit-transform not working in JavaScript rotation animation(no JQuery)

Question

I made a animation function for a simple game I am making, the animation rotates some text 360degrees 4 times, to give it the appearance that the text is spinning. I looked for similar issues to the one I'm experiencing, but the suggestions did not solve my problem. The animation method is part of my view-object:

rotateText  :   function(deg, message) {
                    this.gameState.innerHTML = message;

                    var animationStepsLeft = this.STEPS;
                    requestAnimationFrame(setStyle);

                    function setStyle() {
                        if(animationStepsLeft > 0) {
                            Perfection.view.gameState.style = 
                            "-ms-transform: rotate(" + deg + "deg);" +
                            "-webkit-transform: rotate(" + deg + "deg);" + 
                            "-moz-tranfsform: rotate(" + deg + "deg);" +
                            "transform: rotate(" + deg + "deg);";
                            deg += 28.8;
                            console.log("Rotated");
                            animationStepsLeft--;
                            requestAnimationFrame(setStyle);
                        };
                    };
                 },

The "gameState" is a paragraph element in HTML, which is a property of the view object. The method is supposed to take a starting point for the degrees (0) and the message you want to spin - is passed as a string. The amount of steps it's executing is 50, and each time the animation is called the text is rotated 28.8 degrees. My issue is that the animation works flawlessly in Firefox but does not seem to work in webkit based browsers (It's not working in Chrome or Safari). I should mention that the method is being called, as I've attached a console.log in the attempt to debug, and it's being logged 50 times, and the text appears on the screen, but does not rotate. I read in a similar post that in webkit browsers the elements need to be displayed as an inline-block, so I had my CSS styles set as:

#game-state {
display: inline-block;
position: absolute;
margin-left: auto; 
margin-right: auto;
margin-top: 200px;
z-index: 2;
font-family: "Tahoma", Geneva, sans-serif;
text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
font-size: 100px;
color: rgb(213,40,8);   

}

But it is still not working! Can anyone help me pls!

Answer 1

I suggest that you should open console and see what inside element.style. Style is a set of properties. EG: style.height, style.visible... not style="" .

You should change your code to <element>.style.transform='rotate(' + deg + 'deg)' . For -ms-transform you can try to use .style['-ms-transform'].

Using raw javascript then you must detect your browser for supported style.