React.jS AnimateKeyFrames. | Sololearn: Learn to code for FREE!


React.jS AnimateKeyFrames.

I would REALLY appreciate some help here! I've been able to add a 3rd axis to the React logo ( the one you see when you 'npm install - g create-react-app' etc. ), the problem is that it's still a noticeable "flat" surface spinning on x, y, z axis. How can I add two, or 3, more svg images to rotate in sync to make it look like a 3D atom image?

4/21/2021 7:13:23 PM


3 Answers

New Answer


Oddly specific question ha. You'd need to create flat 3 circles and first rotate them in 3d individually so they are positioned like in the react logo. Then you put those 3 circles in a group and rotate the entire group, or even animate that. Something along the lines of.. <g style="transform-style: preserve-3d; transform: rotateZ(...)"> <circle ... style="rotateX(...) rotateY(...)" /> <circle ... /> <circle ... /> </g> Since you are applying rotation to the <g> element all the circles will rotate "in sync" as you say.


If the atom's core is supposed to be a sphere then I'd put a circle on top of everything else and not rotate it at all. A 3d sphere will look like a circle from every angle so no need to do complicated rotations with it :)


Thanks so much! The only other thing that bothers me, is the dot that is centered amongst the 3 rotating circles, is it a 4th image element? The examples I've done some research on, looks like the circle in the centre is on its own rotate'...'(), linear speed...?