How to make 3d rotating sphere in web?

Answer 1

Js & math for true 3d stuff.

Answer 2

https://www.sololearn.com/Discuss/1323903/?ref=app

Answer 3

Gordon
ooh...
ok..
i didn't saw that

Answer 4

Satnam Singh .
wow that was awesome👌 thx

Answer 5

Before asking a question on the Q/A,
try to search :

 • Google Advanced Search :
Set domain to 》sololearn.com《 for  search only on the SoloLearn
https://www.google.com/advanced_search

  • Eclipse Wiki :
"Before asking a question on the forums"
https://wiki.eclipse.org/Before_asking_a_question_on_the_forums

  • SoloLearn Advanced Search :
http://www.freecodeexamples.com/2018/12/sololearn-advanced-search.html

https://code.sololearn.com/W26q4WtwSP8W/?ref=app

Answer 6

https://code.sololearn.com/WTh4kjNThLpA/?ref=app

Answer 7

thats gonna be very hard..
but we can make it by drawing squares with some math skills ...

i will give it a try in free time...

Answer 8

https://code.sololearn.com/WMwybCD23X0G/?ref=app

not pretty perfect..
but just tried

may take a little time to load because of a for loop..
and rendering 1K elements and animation may be buffering

Answer 9

https://code.sololearn.com/W9OKe1p1s9Ry/?ref=app

Answer 10

https://www.w3schools.com/css/css3_3dtransforms.asp
Prashanth Kumar he just needed to progress a bit further in his CSS lesson and then learn these: rotateX(), rotateY(), rotateZ() 😅

But anyway, a cool way to achieving the rotating sphere effect.

Answer 11

thanks

Answer 12

I tried to added rotating too 😁

https://code.sololearn.com/WPwWL5Pl9eFk/?ref=app

Answer 13

CSS
transform: rotateX(45deg)
transform: rotateY(45deg)
transform: rotateZ(45deg)

@keyframes
and
animation

You are getting close to the CSS lesson soon.

https://www.sololearn.com/learn/CSS/2253/

Answer 14

Use code playground to practice it.
When you rotate against Y axis and X axis, the circle is rotating in 3 dimensions.

Answer 15

Satnam Singh wow, these balls really rocks
We need to reproduce the 3d balls as practice 😋

Answer 16

https://codepen.io/aholmes/pen/MyGKZd

Answer 17

it is 2d

Answer 18

I asked a sphere not a circle

Answer 19

https://code.sololearn.com/WLCm3CADVol3/?ref=app

Answer 20

Normal rotate() is rotateZ()
Because Z axis is perpendicular to screen.
When you rotateX or rotateY it looks 3D

Proceed with your CSS course to transform and @keyframes
You are there soon😉