Add numbers to CSS variables in JS

Hi!
I am working on a project here (https://codepen.io/user_jacob/pen/oNjqWGg). It is far from over. What I want to do is to rotate the elements 90 degrees every 3 seconds. There are 4 div elements inside the ‘inner’ container, which includes a variable called --angle. How to add 90 to —angle (a CSS variable)? Is it possible?

You can set the transform property on the .inner div using

element.style.transform = "rotate(Xdeg)";

But rotating that div will also rotate the text and so the text will be sideways/upside down during the rotation. If you want to keep the text right side up then a better solution might be to rotate the classes on the four .feat divs. Right now they have class names .feat1, .feat2, .feat3, and .feat4. Change those names to represent their position instead (i.e. change them to .top, .right, .bottom, .left). Then every three seconds you can just shift the classes on them (e.g. the div that currently has .top would be given the class .right on the next shift). Instead of rotating the entire div, you are just shifting the positioning of each of those .feat divs.

Thank you for taking time. I have done so previously, it just rotates the entire div only once not every 3 seconds. That is why I want to use the CSS variable.

You are going to have to use JS to make it rotate every three seconds. I can see in the JS pane that you already have a setInterval for every three seconds that calls the rotation function. Now you need to put the logic inside of that function to do the rotation.

1 Like

You don’t need JS at all, just rotate the outer container with CSS animation.

.yourclass {
...
animation: rotate 3s infinite;
}
@keyframes rotate {
50 % {transform: rotate(360deg)}
}