CSS3 Transform 只播放第一项

Question

我试图让我的 div 在每次单击它时旋转 360 度，使用 CSS3 变换旋转。但是，我还使用 CSS3 转换转换来垂直对齐我的 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
        });

Answer 1

事实上，仅当显式设置了 2 个端点时，过渡才能正确，这里最初未显式设置 rotate 转换，之后第一次点击时，它被明确设置为 rotate(360deg)，因此下一次点击有效。要解决这个问题，您只需要最初通过 CSS 代码为您的 div 应用 rotate(0deg):

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

请注意，我强调了正确这个词，事实上，如果您将初始 Angular 设置为某个等于或小于180deg的 Angular ，您会看到它过渡正常.我怀疑如果你没有明确设置初始旋转变换，行为是由浏览器决定的，即 360deg 不会进行任何转换，否则旋转转换可能是顺时针的(如果angle % 360 小于或等于 180deg) 如果 angle % 360 大于 180deg 则逆时针旋转code>(注意 angle 和 360 之间的模运算)。

Demo.