0

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?

21st Apr 2021, 7:13 PM
Conrad
Conrad - avatar
3 Respostas
+ 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.
21st Apr 2021, 11:14 PM
Schindlabua
Schindlabua - avatar
+ 1
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 :)
23rd Apr 2021, 12:02 AM
Schindlabua
Schindlabua - avatar
0
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...?
22nd Apr 2021, 10:33 AM
Conrad
Conrad - avatar