0

The transform property of CSS does'nt work?

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

3rd Feb 2019, 5:52 PM
Shubham Tiwary
Shubham Tiwary - avatar
10 Answers
+ 2
🤔 When running your code, it seems to work properly What exactly do you want it to do?
3rd Feb 2019, 6:08 PM
Faisal
Faisal - avatar
+ 2
The output of the code does seem to rotate the element though 🤷‍♂️ Are you wanting to make it an animation?
3rd Feb 2019, 6:10 PM
Faisal
Faisal - avatar
+ 2
The transition css cannot work instantly. It has to be triggered, for example by hover it. https://code.sololearn.com/W3hY8B1Uxtc9/?ref=app
3rd Feb 2019, 11:59 PM
CalviŐ˛
CalviŐ˛ - avatar
+ 1
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);} }
3rd Feb 2019, 6:18 PM
Faisal
Faisal - avatar
+ 1
InvokerX try to prefix your css -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);
4th Feb 2019, 12:20 AM
CalviŐ˛
CalviŐ˛ - avatar
0
rotate it
3rd Feb 2019, 6:09 PM
Shubham Tiwary
Shubham Tiwary - avatar
0
I mean its horizontal right, so can u make it vertical?
3rd Feb 2019, 6:10 PM
Shubham Tiwary
Shubham Tiwary - avatar
0
If you just change the rotate value to 90deg it should make the rectangle verticle
3rd Feb 2019, 6:12 PM
Faisal
Faisal - avatar
0
I dont k ow but even if I rotate it to 90deg its the same
3rd Feb 2019, 6:13 PM
Shubham Tiwary
Shubham Tiwary - avatar
0
ok then can u show me how to show the rotation with an animation?
3rd Feb 2019, 6:14 PM
Shubham Tiwary
Shubham Tiwary - avatar