+ 3

# How to make 3d rotating sphere in web?

31st Dec 2018, 2:04 PM
B.D
+ 10
Js & math for true 3d stuff.
1st Jan 2019, 3:53 PM
Haris
31st Dec 2018, 5:30 PM
Danijel Ivanović
+ 7
Gordon ooh... ok.. i didn't saw that
1st Jan 2019, 3:39 AM
Prashanth Kumar
+ 7
Satnam Singh . wow that was awesome👌 thx
1st Jan 2019, 10:46 AM
Prashanth Kumar
+ 6
31st Dec 2018, 3:20 PM
Danijel Ivanović
+ 6
https://code.sololearn.com/WTh4kjNThLpA/?ref=app
31st Dec 2018, 4:49 PM
Calviղ
+ 6
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...
31st Dec 2018, 5:45 PM
Prashanth Kumar
+ 6
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
31st Dec 2018, 7:09 PM
Prashanth Kumar
8th Jan 2019, 1:40 PM
Martin Möhle
+ 5
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.
1st Jan 2019, 2:28 AM
Gordon
+ 5
thanks
1st Jan 2019, 6:28 AM
B.D
+ 5
I tried to added rotating too 😁 https://code.sololearn.com/WPwWL5Pl9eFk/?ref=app
1st Jan 2019, 7:01 AM
Calviղ
+ 4
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/
31st Dec 2018, 2:25 PM
Gordon
+ 4
Use code playground to practice it. When you rotate against Y axis and X axis, the circle is rotating in 3 dimensions.
31st Dec 2018, 2:54 PM
Gordon
+ 4
Satnam Singh wow, these balls really rocks We need to reproduce the 3d balls as practice 😋
1st Jan 2019, 6:30 AM
Gordon
1st Jan 2019, 7:45 PM
Микола Федосєєв
+ 3
it is 2d
31st Dec 2018, 2:38 PM
B.D
+ 3
I asked a sphere not a circle
31st Dec 2018, 4:32 PM
B.D
1st Jan 2019, 6:12 AM
Gordon
+ 3
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😉
1st Jan 2019, 6:16 AM
Gordon
Hot today
Help