CSS3 Animation Assignment | SoloLearn: Learn to code for FREE!


CSS3 Animation Assignment

Hi Team, I'm currently learning web development. How can I create two round images attached to each other(like a spin wheel) but the border will spin anticlockwise while the round image in the middle spins clockwise. I really need your help to solve this using CCS3 animations and HTML5. Thanks

3/5/2020 6:19:16 PM

Nnodim Chukwudi Clifford

3 Answers

New Answer


Hello Nnodim Chukwudi Clifford, To have rounded image give it an equal width and height then apply a border-radius half the width Ex: width:200px height:200px border-radius:100px ( or 50%) For animation it's about @keyframes in CSS you have to learn, and transform : rotateZ(360deg) here is what you would need with 360deg for clockwise and -360deg anticlockwise, but learn how to use keyframes. Then you also have to learn about position (relative and absolute),it can be tricky. Here is an example: https://code.sololearn.com/WPHfI9J8p0r7/?ref=app


Thanks alot Emmanuel Z. I really appreciate your help 👏


Nnodim Chukwudi Clifford you're welcome, indeed I also thank you because when thinking and coding to give you example , I made mistakes which possibly can be solutions on other stuff i'm working on, so... that's the funny thing.