CSS3转换仅播放第一项

我试图让我的div在每次单击时旋转360度，使用CSS3 transform rotate。然而，我也在使用CSS3 transform translate来垂直对齐我的div

在第一次单击时，它会应用所有必需的CSS，但实际上不会旋转，但会在之后旋转所有单击。它始终保持垂直对齐

不确定如何解决此问题，感谢您的帮助：）

我的css：

    #my-div {
        height: 300px;
        width: 300px;
        transition: all 0.5s ease-in-out;
        display: block;
        margin: auto;

        /*to vertically align*/
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

我的javascript

var angle = 360
        $('#my-div').click(function() {
            $(this).css({
                '-webkit-transform' : 'translateY(-50%) rotate('+angle+'deg) ',
                'transform' : 'translateY(-50%) rotate('+angle+'deg)'
            })
            angle += 360
        });

---

事实上，只有在明确设置了两个端点时，转换才能正常工作，这里初始的

旋转

变换没有明确设置，在第一次单击后，它被明确设置为

旋转（360度）

，因此下一次单击可以工作。要解决此问题，您只需首先通过CSS代码为div应用

旋转（0deg）

：

#my-div {
   /*...*/
   -webkit-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
}

请注意，我强调了正确的单词，事实上，如果您将初始角度设置为小于或等于

180deg

，您将看到它正常。我怀疑如果您没有明确设置初始旋转变换，行为由浏览器决定，即

360deg

不会进行任何转换，否则旋转转换可能是顺时针的（如果

角度%360

小于或等于

180deg

）如果

角度%360

大于

180度

，则为逆时针方向（注意

角度

和

360

之间的模运算）

---

您还需要使用

转换

，以便可以看到转换：），否则它是即时的