How to make a 3D object and allow a user to rotate to any angle of the shape using web | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 3

How to make a 3D object and allow a user to rotate to any angle of the shape using web

3D shapes

14th Apr 2019, 5:52 PM
INFINITรŽ๐ŸŒ€
INFINITรŽ๐ŸŒ€ - avatar
8 Answers
+ 3
This is how you can rotate something. https://www.sololearn.com/learn/CSS/2250/ To make the user rotate it , you can use an range bar , for example.
14th Apr 2019, 6:24 PM
๐Ÿ‡ Alex Tuศ™inean ๐Ÿ’œ
๐Ÿ‡ Alex Tuศ™inean ๐Ÿ’œ - avatar
+ 3
To rotate an object you can use : rotateX(180deg) rotateY(180deg) rotateZ(180deg) Idk how to do an 3D object...
14th Apr 2019, 6:32 PM
๐Ÿ‡ Alex Tuศ™inean ๐Ÿ’œ
๐Ÿ‡ Alex Tuศ™inean ๐Ÿ’œ - avatar
+ 3
you could try some divs which have different colors and make, for example a square oht of them
14th Apr 2019, 7:37 PM
Iโ€˜m Sarah๐ŸŒน
Iโ€˜m Sarah๐ŸŒน - avatar
+ 2
Thanks. But how do you rotate a 3D shape
14th Apr 2019, 6:31 PM
INFINITรŽ๐ŸŒ€
INFINITรŽ๐ŸŒ€ - avatar
+ 1
๐Ÿ‘
14th Apr 2019, 7:39 PM
INFINITรŽ๐ŸŒ€
INFINITรŽ๐ŸŒ€ - avatar
+ 1
you can either make stuff in plain css, svg or canvas. the simpler option is css, so its probably worth learning first, then youd need to manipulate it some how with JS or JQ(much easier) to respond to some kind of event. these are the css tags to look up to get you started perspective transformation-style: transform youll also need to nest at least three elements .container.object>.part*6 the perspective applies to the container the transformation-style applies to the .object and finally the transform applies to the .part(there are multiple parts)
15th Apr 2019, 10:21 AM
Logomonic Learning
Logomonic Learning - avatar
0
I would suggest look at other people's code where they are doing exactly what you want to do and learn from that. To me, being able to easily see other people's codes is one of the best features of Sololearn. I, myself have learned mutiple things by doing just that: seeing a code that has a feature that I want to know how to use and so I look at the actual code to see how they did it.
14th Apr 2019, 11:57 PM
Decimis โ€  ๐•ฏ๐–Š๐–ˆ๐–Ž๐–’๐–Ž๐–˜
Decimis โ€  ๐•ฏ๐–Š๐–ˆ๐–Ž๐–’๐–Ž๐–˜ - avatar
0
You could use a library like Babylon or Three.js https://code.sololearn.com/Wovfpg9i4dXv/?ref=app
19th Apr 2019, 9:23 PM
RadiatedMonkey
RadiatedMonkey - avatar