CSS3 Animation Assignment

Question

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

Answer 1

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

Answer 2

Thanks alot Emmanuel Z. I really appreciate your help 👏

Answer 3

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.

Answer 4

Alternative word of 0%?