-webkit转换在JavaScript旋转动画中不起作用(没有JQuery）

我为我正在制作的一个简单游戏制作了一个动画函数，动画将一些文本旋转360度4次，使其看起来像文本在旋转。我寻找与我所经历的问题类似的问题，但这些建议并没有解决我的问题。动画方法是我的视图对象的一部分：

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);
                        };
                    };
                 },

"gameState"是HTML中的一个段落元素，它是视图对象的一个属性。该方法应该以度数（0）为起点，并且要旋转的消息作为字符串传递。它执行的步数为50，每次调用动画时，文本都会旋转28.8度。我的问题是，动画在Firefox中运行得很完美，但在基于webkit的浏览器中似乎不起作用（在Chrome或Safari中不起作用）。我应该提到的是，该方法正在被调用，因为我在尝试调试时附加了一个console.log，它被记录了50次，文本显示在屏幕上，但不旋转。我在一篇类似的文章中读到，在webkit浏览器中，元素需要显示为内联块，所以我将CSS样式设置为：

#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);   

}

但它仍然不起作用！有人能帮我吗！