- This topic is empty.
February 23, 2019 at 6:18 am #283523
Having problems with creating a 3d face on box, with the perspective of viewing the box from above.
have been following a tutorial here:
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:
Any SVG heads that can point me in the right direction? I would be very much appreciative.
Thank you in advance.February 23, 2019 at 11:21 pm #283566
They seem to have taken a slightly odd and confusing approach… the inline transform on
rectappears 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.
Edit – the top element had negative perspective which isn’t a valid value.February 24, 2019 at 3:22 am #283569
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…
Link above is to view the code in IE.February 24, 2019 at 11:13 am #283579
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.February 24, 2019 at 2:36 pm #283587
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.February 24, 2019 at 4:48 pm #283610
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.February 24, 2019 at 6:48 pm #283611
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
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)…February 25, 2019 at 12:46 am #283618
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.February 25, 2019 at 1:39 am #283620
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…February 25, 2019 at 3:45 am #283628
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!February 25, 2019 at 4:01 pm #283701
perspective of the right hand side of the box flattens a little bit
I think you’d have to dynamically alter the
perspective-originvalue 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
changeevents for that…
This would be the line to make depth smooth (but I noticed Firefox doesn’t redraw it well):
$('#box').css('perspective', (perspective+1000) + 'px');February 25, 2019 at 8:04 pm #283726
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.
Edit – actually, I see a few more glitches when rotating first so not done yet…February 25, 2019 at 11:44 pm #283731
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:
Added the Y and Z rotations as well. Still IE compatible, but only for the X axis (hides the other sliders).
:-)February 26, 2019 at 6:19 am #283734
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?February 26, 2019 at 7:50 pm #283791
I don’t understand the issue, maybe you could elaborate on it (show a demo perhaps).
- The forum ‘CSS’ is closed to new topics and replies.