Creating a Face On 3d Box

[Shikkediel]

Once thing I noticed, the axes of the parent (used for Y and Z rotation) don’t exactly correspond with the children. You can see this when putting the box vertically with the Z slider – the X and Y will then have the same effect in rotation. It’s because the children are adhering to their own coordinate system which shift relative to each other…

So I’ll leave the previous pen in place, making it compatible with IE, but I’ve also forked it to make a slimmed down version that only works on browsers that support preserve-3d. I’ll base all rotations on the parent with that one. Others (Mostly IE) will still see the three-dimensional box but the sliders will be hidden.

https://codepen.io/Shikkediel/pen/PLwLVb

I’ll be working on them for a little while. Kind of interesting and educational to do.

[Shikkediel]

I’ve also made some changes that might relate you what you were trying to do with the text. If you remove the fixed height from .inner (not from #box because that will mess with the IE fallback), any text you put inside the front element will decide which initial height it gets. The other sides will adapt to that, all will take the size the parent has (and the front is no longer absolutely positioned). Of course this will meet a new set of problems when you start scaling it.

[Shikkediel]

The code in the pen above turned out to be pretty slim, kinda neat. But the more elaborate script with fallbacks cleaned up nicely too. It still works in IE and also “auto” prefixes for -webkit- support where needed. I added some tiny plugins for it at the bottom, jQuery’s quite awesome like that. I’ll post that demo one more time so they’re on the same forum page.

https://codepen.io/Shikkediel/pen/YgzJzv?editors=0110

Here’s also a version where the long transforms are written by a function. Slightly cleaner but also a bit less readable. I’ll leave it here for posterity (I think I’m done fiddling with the basic code otherwise).

codepen.io/anon/pen/vPNyJp

If the remit() method is supposed to do a transform (not any of the other properties – those are written out in full), it accepts six numbers for the X-Y-Z translations and rotations.

[ainsley_clark]

Hi @Shikkedial,

Many thanks for the replys and sorry if im late!

I have designed a whole website without the inner div and it works perfectly in chrome. But looks extremely messed up in safari.

I have tried wrapping the sides in inner and setting persevere 3d but to no avail.
The sides are relatively positioned and have to stay like that..

Do you have any ideas?

Thanks so much.

[Shikkediel]

I can’t check on Safari so I don’t know what messed up means. The only suggestion I have is adding prefixes for the 3D transform related CSS properties but that would only do anything up to version 8.

Maybe someone else on the forum can have a look what happens on that browser… the code seems rather universally supported.

[Author]

Posts