The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Creating a Face On 3d Box Reply To: Creating a Face On 3d Box


I did one step, isolating the box and rewriting it without SVG (but somehow the top doesn’t fit correctly)…

Tricky thing keeping it IE compatible is that anything you’d like to do to the box as a whole will have to be done to each side simultaneously instead, the browser doesn’t support “inheritance” of perspective for which one would usually apply preserve-3d.

If you ignore that browser, it’s quite easy. You could just apply a transform to the parent element.

Edit – I’ve come to the conclusion that in the current setup it just isn’t possible. All elements would have to rotate around the center, requiring each to have their own transform-origin. This seems to mess with the perspective that’s being applied, making it impossible to neatly create the box.

Lol, I was going from bad to worse (X rotation somewhat works)…