- This topic is empty.
-
AuthorPosts
-
February 23, 2019 at 6:18 am #283523
ainsley_clark
ParticipantHi 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.htmlWhich 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/OdKgawAny 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 #283566Shikkediel
ParticipantThey 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.Edit – the top element had negative perspective which isn’t a valid value.
February 24, 2019 at 3:22 am #283569Shikkediel
ParticipantI 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 #283579ainsley_clark
ParticipantWow, 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 #283587ainsley_clark
ParticipantOk 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 #283610Shikkediel
ParticipantIf 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 #283611Shikkediel
ParticipantI 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)…
February 25, 2019 at 12:46 am #283618ainsley_clark
ParticipantHi 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.
February 25, 2019 at 1:39 am #283620Shikkediel
ParticipantComplicated 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 #283628ainsley_clark
ParticipantSo 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 #283701Shikkediel
Participantperspective 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
andchange
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');
February 25, 2019 at 8:04 pm #283726Shikkediel
ParticipantI 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 #283731Shikkediel
ParticipantLooks 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).
:-)
February 26, 2019 at 6:19 am #283734ainsley_clark
ParticipantYou 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 #283791Shikkediel
ParticipantI don’t understand the issue, maybe you could elaborate on it (show a demo perhaps).
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.