Creating a Face On 3d Box

[ainsley_clark]

Hi all,
Having problems with creating a 3d face on box, with the perspective of viewing the box from above.
have been following a tutorial here:
https://oreillymedia.github.io/Using_SVG/extras/ch11-3d.html

Which nearly gets me to a point where I want to be.
However I need the top and bottom parts of this rectangle and cant figure it out for the life of me.
I have attached a codepen:
https://codepen.io/ainsleyclark/pen/OdKgaw

Any SVG heads that can point me in the right direction? I would be very much appreciative.
Thank you in advance.

[Shikkediel]

They seem to have taken a slightly odd and confusing approach… the inline transform on rect appears to have no influence so I just removed that . But I managed to get the top element positioned. Also moved the inline style attributes to the CSS to make it a bit more readable.

codepen.io/anon/pen/vbobxo

Edit – the top element had negative perspective which isn’t a valid value.

[Shikkediel]

I think the inline transform is an attempt at browser compatibilty. Edit – apparently for IE so I added them again (including the top). Seems a lot easier to not use an SVG…

jsbin.com/punibinuse

Link above is to view the code in IE.

[ainsley_clark]

Wow, thank you @Shikkediel.

Would you advise not to use an SVG and convert these to divs?
I am trying to create a ‘box maker’ so to speak, so the user can define his or hers own rotation, scale etc and then copy the css.
I’m wondering if you would be able to take a look at my most recent pen to point me in the right direction.

Many thanks again.

https://codepen.io/ainsleyclark/pen/OdKgaw

[ainsley_clark]

Ok so update, I have scale X & Y working, although its probably not the most elegant. Still working on depth, and the most tricky one – rotate.

[Shikkediel]

If you’re trying to do something like that, I’d move away from using an SVG. Simply because of the fact that it doesn’t support 3D so it won’t ever work in IE. Depth rotation isn’t an option without CSS (something I learned while fiddling with this), the inline fallback is only optically three-dimensional but it’s really a flat plain. I’ll have another look at your demo, it’s quite interesting in itself.

[Shikkediel]

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

[ainsley_clark]

Hi Shikkediel,

Thank you for your reply and also rewriting it without SVG.

I’m not too worried about IE compatibility, Im presuming that Edge supports inheritance of perspective, but even if it doesn’t, its no biggie.
Been fiddling with this for a few hours now and can’t really get anywhere.

Its very difficult haha!

If anyone has a fix, would be greatly appreciative.

[Shikkediel]

Complicated it is indeed. I was messing around with it some more (putting perpective on the parent which much simplifies the transforms) but after finishing X rotation, I fear it only becomes increasingly mind boggling…

codepen.io/anon/pen/vPOyaz

[ainsley_clark]

So close, thank you so much for all of your help with this, its incredible.

I have forked your pen and added scaleY scale X and depth.

Im happy if just the rotate X works but Ive noticed some things and wondering if you have any idea why there happening:
If I scaleX, the perspective of the right hand side of the box flattens a little bit.
scaleY is working perfectly.
Depth is working, but it’s changing the perspective, and that in turns changes the border size.
Depth is an even bigger headache with rotateX!

Thank you so so much!

https://codepen.io/ainsleyclark/pen/wOwYrM

[Shikkediel]

perspective of the right hand side of the box flattens a little bit

I think you’d have to dynamically alter the perspective-origin value but I lack the understanding of it to tell you how exactly. I would assume adding the extra width to the first value (horizontal perspective) but that’s just a guess.

But I’ll fiddle around with it some more to see if I can improve anything. I find this sort of thing kinda fun.

So far it’s still IE compatible by the way but the slider needs both input and change events for that…

$(document).on('input change',

This would be the line to make depth smooth (but I noticed Firefox doesn’t redraw it well):

$('#box').css('perspective', (perspective+1000) + 'px');

[Shikkediel]

I think I fixed most of it, the only one remaining with some trouble is the Y scaling (and then rotating) but I’ll have another look at that as well later.

codepen.io/anon/pen/oVNEXq

Edit – actually, I see a few more glitches when rotating first so not done yet…

[Shikkediel]

Looks like I figured everything out, that was definitely educational to better understand transform-origin. I’ll leave the pen above in place so you can see which variables I added – but since some of them are double and abundant I’ll be optimising the code here:

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

Added the Y and Z rotations as well. Still IE compatible, but only for the X axis (hides the other sliders).

:-)

[ainsley_clark]

You are a legend! Thank you so much.

I have text within the .front side.
My problem now is that because the sides are absolute height: auto wont work, and if I set the sides to relative, it goes haywire.

Any ideas?

[Shikkediel]

I don’t understand the issue, maybe you could elaborate on it (show a demo perhaps).

[Author]

Posts