React.jS AnimateKeyFrames.

Question

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?

Answer 1

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.

Answer 2

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 :)

Answer 3

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...?