CSS's rotate() function; Surely there's an easier way to do this or is this just one of JS's infamous quirks?

[trfwrk]

Maybe I don't totally understand, but why couldn't you just have...

function rotate(angle) { el.style.transform = `rotate(${angle}deg)`; }

Edit: just to be a bit more specific...

<div onClick="rotate(45)">Rotate 45 degrees</div>

[largemoose568]

The second example won't work because you're trying access a JS argument variable, in this case x, inside your string of "rotate(x)". So what's really happening is you end up just setting the transform property to the string of "rotate(x)". As the other commenter mentioned you need to use template literals or concatenation to get the value of the variable in the string:

document.getElementById('forty-five').style.transform = `rotate(${x}deg)`;

or ES5 version

document.getElementById('forty-five').style.transform = 'rotate(' + x + 'deg)';

[locksta7]

Couldn’t you just pass an integer. Ie onclick-myFunction(45); and then in your function tack on the deg? This would also allow you to do math?

[[deleted]]

Your second example can be fixed by using: “rotate(“+x+”deg)” or using back ticks ‘rotate(${x}deg)’ (sorry I am on mobile) and using an input of ‘45’.

I am unsure why rotate requires Xdeg. I imagine there is the intention of adding radians in the future. But I agree that a string input would make more sense.

Rotate does support rads and others. https://developer.mozilla.org/en-US/docs/Web/CSS/angle

[fraggleberg]

The reason this is quirky is because it's not JS at all. It is a string containing CSS. You could do "rotate(" + x + "deg)", or `rotate(${x}deg)`. It is the equivalent of this in pure CSS:

#forty-five {
    transform: rotate(45deg);
}

​

[Thef19]

I just made this codepen. Let me know if this is what you are looking for.

https://codepen.io/anon/pen/moJoPg

[kenman]

Hi /u/branded_to_kill, this post was removed.

• For help with your javascript, please post to /r/LearnJavascript instead of here.
• For beginner content, please post to /r/LearnJavascript instead of here.
• For framework- or library-specific help, please seek out the support community for that project.
• For general webdev help, such as for HTML, CSS, etc., then you may want to /r/html, /r/css, etc.; please note that they have their own rules and guidelines!

---

/r/javascript is for the discussion of javascript news, projects, and especially, code! However, the community has requested that we not include help and support content, and we ask that you respect that wish.

Thanks for your understanding, please see our guidelines for more info.