This past few weeks, I have been playing with 3D CSS and creating animated 3D demos (like this paper plane or a single element dice). This weekend I started coding a 3D version of a store and completed the outline. There are still many parts missing in the interior, but the exterior is (kind of) complete:
This demo is a fork of the original linked above, so it doesn't change as I add more things to the original demo.
Some decorations on the wall will be interesting, and furniture (on twitter I got some interesting suggestions: maybe a counter and a table with chairs? an arcade machine? some posters?) I will be working on that soon.
I have been recording the whole process in order to share it later on my Youtube channel. The demo is still incomplete, but here's a time-lapse of the progress so far:
Top comments (6)
Looks great so far! I see you did the 2 div cubes but better just to show me how it should be done 🤣
It's one div only 😉
I would say "try to figure out how it was done"... but you can see the code anyway 😋
I am actually attempting a single div cube still (fully 3D on every axis!)
If it works I think the CSS will make you cry as I am really having to abuse CSS to make the sides move from one side of the cube to the other to complete the illusion.
I don’t think anyone had managed it before! (And I can see why!)
I tried, but desisted. But may try again. The issue for me was that the
transform-originhas to be the same for all transformations, so switching the sides of the "main element" (not the pseudos) caused chaos. But it can probably be done by changing more than what I was changing. Best of luck! You can do it!You are using DOM elements to draw 3D objects.
Is it performant(in this case or for complex objects)?
Great question. It is not really performant and wouldn't recommend it outside of some fun tests and demos. I don't have metrics on it though, but my computer fans thank me when I close the tab with the 3D demos :P
Some comments have been hidden by the post's author - find out more