Using the CSS transform property with JS – How to use cosine or other angle calculation?

0

Issue

when I call this in my JS :

block.style.transform = "rotate(67.5deg) skewX(45deg) scaleY(cos(45deg))";

Nothing happens on my page, and the console returns an error :

Error in parsing value for ‘transform’. Declaration dropped.

Thos problem is with the last parameter and the cosine.

I tried using Interpolation syntax for the calculation but it doesn’t work.

Solution

You will need to calculate the cos value before you assign the style.

You could use template literals to ` execute the code inline.

elem.style.transform = `rotate(67.5deg) skewX(45deg) scaleY(${Math.cos(45)})`

Answered By – ngearing

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More