Forums

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

#283611
Shikkediel
Participant

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

codepen.io/anon/pen/gEYmdq

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

codepen.io/anon/pen/eXOWoj