1

The rotation animation is working. The size of the image is changing, but the translation of the image is not working at all. I'm not sure why and I tried it separately, and it still wouldn't work. I've also looked at a dozen examples of other people translating their items including examples on codepen. My code is almost exact, yet it does not produce any results. Why is this happening and how can I fix it?

Thanks for any advice or help.

$("#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">
Tans
  • 13
  • 2

1 Answers1

2

Look, if you want to apply multiple transforms to your element (rotation and translate, like here), you need to do it like that:

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

But in your situation you just firstly apply transform translate and then override it with rotation, like this:

transform: translateX(30px); //will not be working any more
transform: rotate(90deg); //override previous transform
Natalia Davydova
  • 728
  • 7
  • 22
  • When I do it the way you're showing, it doesn't rotate around the center. Is there simply a way to transform both but in order and not simultaneously. – Tans Jul 24 '19 at 18:22
  • @Tans You can do it like that: step 1: apply transform: translateX(250px); step 2: apply transform: translateX(250px) rotate(90deg); – Natalia Davydova Jul 24 '19 at 18:27
  • Never mind, I was just trying to reverse the transform by doing another transform but with negative rotations and translations when I can just set it to "". Thank's for the help! – Tans Jul 24 '19 at 18:32