The transform property of CSS does'nt work?

Question

Ive tried in many IDEs but nothing seems to make the transorm property work ,
I gave an example in the code below:

https://code.sololearn.com/WL0yoaCTejKE/?ref=app

Answer 1

🤔 When running your code, it seems to work properly
What exactly do you want it to do?

Answer 2

The output of the code does seem to rotate the element though 🤷‍♂️
Are you wanting to make it an animation?

Answer 3

The transition css cannot work instantly. It has to be triggered, for example by hover it.

https://code.sololearn.com/W3hY8B1Uxtc9/?ref=app

Answer 4

Huh, seems a little weird that it wouldn't work for you :/

For making it an animation, you would just need to add a few keyframes to an element while setting different things to happen at different points of the animation.

The CSS for that would be something like this:
#element{
/* Other attributes */
animation-name: animate;
animation-duration: 2s;
}

@keyframes animate{
from{transform: rotate(0);}
to{transform: rotate(90deg);}
}

Answer 5

InvokerX try to prefix your css

-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);

Answer 6

rotate it

Answer 7

I mean its horizontal right, so can u make it vertical?

Answer 8

If you just change the rotate value to 90deg it should make the rectangle verticle

Answer 9

I dont k ow but even if I rotate it to 90deg its the same

Answer 10

ok then can u show me how to show the rotation with an animation?