Extremely cool. I hand rolled some 3d objects using only CSS a few years ago [0]. One challenge I faced with the rotation was that text on the stop and bus signs would appear backwards from behind. To solve this I added an animation that flips the div 180 degrees. I tried to do the flip while the signs were occluded, but I didn't add anything to occlude the bus stop sign so you can see it flip as it rotates
Toaster: Pure CSS 3D Editor
31–38 of 38 posts
Re: Toaster: Pure CSS 3D Editor
#32now make it SVG instead of CSS :)
Re: Toaster: Pure CSS 3D Editor
#33Extremely cool. I hand rolled some 3d objects using only CSS a few years ago [0]. One challenge I faced with the rotation was that text on the stop and bus signs would appear backwards from behind. To solve this I added an animation that flips the div 180 degrees. I tried to do the flip while the signs were occluded, but I didn't add anything to occlude the bus stop sign so you can see it flip as it rotates [0]: http…
Stop signs are blank on the back. Could you hide the text instead?
Re: Toaster: Pure CSS 3D Editor
#34Extremely cool. I hand rolled some 3d objects using only CSS a few years ago [0]. One challenge I faced with the rotation was that text on the stop and bus signs would appear backwards from behind. To solve this I added an animation that flips the div 180 degrees. I tried to do the flip while the signs were occluded, but I didn't add anything to occlude the bus stop sign so you can see it flip as it rotates [0]: http…
Stop signs are blank on the back. Could you hide the text instead?
Ah, that’s a good point. More accurate and easier
Re: Toaster: Pure CSS 3D Editor
#35Wow... I don't think I've ever seen my M1 MacBook Pro lock up this badly. It took me multiple minutes to close the browser window after loading the snowman model.
Nevertheless: incredibly cool project!
Re: Toaster: Pure CSS 3D Editor
#36Shading instead of outlines might look nice.
Should be relatively easy to implement if you use hsl colors and set the lightness as a function of the nodes rotation.
Re: Toaster: Pure CSS 3D Editor
#37Name is very accurate, as it instantly ramps up CPU usage.
Re: Toaster: Pure CSS 3D Editor
#38Thanks for your sharing, idea is amazing.