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

Question

旋转动画正在工作。图像的大小正在改变，但图像的翻译根本不起作用。我不知道为什么，我单独尝试了它，但它仍然不起作用。我还查看了十几个其他人翻译他们项目的示例，包括 codepen 上的示例。我的代码几乎是准确的，但它没有产生任何结果。为什么会发生这种情况，我该如何解决？感谢您的任何建议或帮助。$("#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