DEV Community

Cover image for Drawing an animated 3D store front with CSS
Alvaro Montoro
Alvaro Montoro

Posted on

Drawing an animated 3D store front with CSS

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:

Discussion (7)

Collapse
inhuofficial profile image
InHuOfficial

Looks great so far! I see you did the 2 div cubes but better just to show me how it should be done 🀣

Collapse
alvaromontoro profile image
Alvaro Montoro Author

It's one div only πŸ˜‰
I would say "try to figure out how it was done"... but you can see the code anyway πŸ˜‹

Collapse
inhuofficial profile image
InHuOfficial • Edited on

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!)

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

I tried, but desisted. But may try again. The issue for me was that the transform-origin has 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!

Collapse
ksengine profile image
Kavindu Santhusa

You are using DOM elements to draw 3D objects.
Is it performant(in this case or for complex objects)?

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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