Cannot rotate element using JS

Question

I want to rotate my element using javascript. My method for rotation:

function AnimateSidebar(sidebar) {
        sidebar.style.width = "20%";

        let arrow = document.getElementById("arrow");
        arrow.style.transform = "rotate(60deg);";
        arrow.style = "tranform(rotate(60deg));";

        arrow.style.mozTransform = "rotate(60deg);";
        arrow.style.msTransform = "rotate(60deg);";
        arrow.style.oTransform = "rotate(60deg);";
        arrow.style.webkitTransform = "rotate(60deg);";
        
        arrow.style = "margin-left:85%;margin-right:0;";
    }

I tried to rotate it in several ways, as you can see above, but nothing works. The last line of code to change the margin of the arrow element works fine.

My css for the arrow element: (the initial rotation in css file works ok)

#arrow{
    transform:rotate(20deg);
    transition:0.8s;
}

My browser is Microsoft Edge.

EDIT: Solved. I had to put the margin property above the tranform property.

Kyle Soeltz · Accepted Answer · 2021-01-15 18:31:09Z

1

The bug appears to be that you have a semicolon inside the string value of your transforms.

Element.style.transform expects the exact CSS, so writing -

arrow.style.transform = "rotate(60deg);";

is roughly interpreted as -

#arrow {
   transform: rotate(60deg);;
}

Notice the double semicolon, which is invalid CSS.

let arrow = document.getElementById("arrow");
arrow.style.transform = "rotate(60deg)";

#arrow {
  width: min-content;
}

<div id="arrow">→</div>

answered Jan 15, 2021 at 18:31

Kyle Soeltz

3161 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Ronald Over a year ago

This does not solve the problem. As I said, the last line of JS works fine, despite containing the semicolon in the string.

Kyle Soeltz Over a year ago

Ah yes that last line was overriding all of the statements above. The semicolon works in that last line as you are setting the complete style and not just a single value.

Maximilian Schaldach · Accepted Answer · 2021-01-15 18:53:20Z

1

Leave out the arrow.style = "tranform(rotate(60deg));";

Try to first change the margin and then transform the arrow afterwards:

arrow.style = "margin-left:85%;margin-right:0;";
arrow.style.transform = "rotate(60deg)";  //without the semicolon!

Or directly set the margin-left using the style margin property:

arrow.style.marginLeft = "85%";

answered Jan 15, 2021 at 18:53

Maximilian Schaldach

212 bronze badges

Collectives™ on Stack Overflow

Cannot rotate element using JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related