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

请注意，我强调正确字，实际上如果将初始角度设置为等于或小于180deg的某个角度，您将看到它转换为OK。我怀疑如果您没有明确设置初始旋转变换，则行为由浏览器确定，即360deg不会进行任何过渡，否则旋转过渡可能是顺时针（如果如果angle % 360大于180deg，则angle % 360小于或等于180deg）和逆时针（注意angle与360之间的模运算{{1}}）。

CSS3 Transform仅播放第一项

1 个答案:

Demo.