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

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:&nbsp;rotate(90deg)&nbsp;translateX(30px);但是在您的情况下，您只需先应用变换平移，然后用旋转覆盖它，如下所示：transform:&nbsp;translateX(30px);&nbsp;//will&nbsp;not&nbsp;be&nbsp;working&nbsp;any&nbsp;more transform:&nbsp;rotate(90deg);&nbsp;//override&nbsp;previous&nbsp;transform