为什么我的翻译动画不起作用

Question

旋转动画正在工作。图像的大小正在更改，但图像的平移根本不起作用。我不知道为什么，我单独尝试了一下，但它仍然不起作用。我还看了十几个其他人翻译他们项目的例子，包括代码笔的例子。我的代码几乎是精确的，但它没有产生任何结果。为什么会发生这种情况，我该如何解决？

感谢您的任何建议或帮助。

$("#toolbar").on("click", function() {
    const speed = 500;
    
    if ($('#toolbar').css("width") == "75px") {
        $('#toolbar').css("transform", "translateX(250px)");
        
        $('#toolbar').css("width", "70px");
        // change toolbar rotation
        $("#toolbar").animate({
            deg: 0
        }, {
            duration: speed,
            queue: false,
            step: function(now) {
                $(this).css({
                    transform: "rotate(" + now + "deg)"
                })
            }
        })
    } else {
        $('#toolbar').css("transform", "translateX(250px)");
        
        $('#toolbar').css("width", "75px");
        // change toolbar rotation
        $("#toolbar").animate({
            deg: 90
        }, {
            duration: speed,
            queue: false,
            step: function(now) {
                $(this).css({
                    transform: "rotate(" + now + "deg)"
                })
            }
        })
    }
});

#toolbar {
    width:70px;
    height:70px;
    transition: transform 500ms linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="toolbar" alt="toolbar" src="http://pngimg.com/uploads/cursor/cursor_PNG67.png">

Answer 1

看，如果你想对你的元素应用多个转换(旋转和平移，就像这里一样(，你需要这样做：

transform: rotate(90deg) translateX(30px);

但是在您的情况下，您只需首先应用转换平移，然后用旋转覆盖它，如下所示：

transform: translateX(30px); //will not be working any more
transform: rotate(90deg); //override previous transform