[css-transforms-2] 'box-depth' for 3D transformed elements

[Danetone]

I have an idea for CSS4, which would make it much easier to create 3D images, such as cubes. By adding a depth property, a developer can easily create a box any size or shape he would so desire, rather than going through the arduous task of creating long transforms. Example: to make a cube of 100px, the code would simply be

my-cube {

box-width: 100px; box-height: 100px; box-depth: 100px; } And it wouldn't have to just be a cube, but any box shape. The width and height and depth could all be different. And also, if the developer made a screen-size 3D box, what if he were able to put text, or images, or even whole pages within that box at varying z-axis levels. So items within a 3d box div could have different z-indexes, and the z-indexes wouldn't just be used for stacking, but would have actual depth value to them. Rather than just saying, z-index: -1; he could say z-index: -50px; or z-index: -10%; etc.

[AmeliaBR]

I've thought of proposing a depth property for this myself — every time I see an example with 5 extra elements to give the illusion of depth to a 3D-transformed element!

Things to think about :

• What color are the side-panels created by the depth? The same as the element background? The border? Or could you customize & give the sides their own image textures?

• How should border-radius curves be handled? Drawing a 3D curved object is more complicated than drawing a box.

Rather than just saying, z-index: -1; he could say z-index: -50px; or z-index: -10%; etc.

I don't think the z-index model can really be expanded to include meaningful units. But it also doesn't need to be, because transform: translateZ(-50px) works instead. But, one thing that doesn't currently work is percentages for z-axis translations; if the container element has a defined depth, then percentages do make sense.

[frivoal]

Even though 3d transforms have already opened that door, I am far from convinced CSS should become a full fledged 3d modelling language. If we do want to go in that direction, I'd suggest looking at things more than one property at a time, otherwise we won't get a coherent and usable system. In addition to the border-radius and side colors raised by @AmeliaBR, unless we think the problem as a whole, we'll just keep opening more question: light source placement, projected shadows, bump maps, and the list goes on and on...

But all in all, it may be doable, but doesn't seem like a natural fit for CSS.

[Danetone]

The other sides could auto-inherit the property values of the front face if undefined. Otherwise they could be defined individually. front-face-background-color/image: back-face-background-color/image: etc. I thought it would be a great idea, since css is already being used for 3d objects anyway. CSS is about the way things are displayed on a page, and to go from 2d to 3d with a single, or a few properties would be a quantum leap in dev creativity. And you're right, I forgot about the translate-z. But I don't know. Maybe it's too much for CSS. But thank you for considering and replying.

[Crissov]

Iʼve also thought about extending CSSʼs and thereby also SVGʼs scope from layered 2D (aka. 2.5D or 2½D) to full-fledged 3D, e.g. in the context of #944. However, a future [css3d] would need to introduce a lot of additional properties and values, e. g. depth for anything with height and width, z for anything with x and y (or vice versa for z-index), front and back or near and far for most stuff with top, right, bottom and left as well as middle and center, or start, end, before and after. This would probably become a problem for some shorthand properties where the association of values would become ambiguous with another, third dimension.

[tabatkins]

Yup, same as others here, I've definitely wanted something like this in the past, but it raises up a ton more questions, and it's almost certainly not worth it vs just doing proper 3d in webgl or the like.

(We need to finally solve the problem of webgl not allowing html content, so you can render form controls/etc in there, but that's a separate thing.)

I'm going to go ahead and close this.

[Crissov]

While CSS3D by itself may not be worth the effort, SVG3D might, especially if you want still (i.e. neither animated nor interactive) models. 🤔

[tabatkins]

Yeah, a retained-mode dedicated 3d graphics language can be useful, but would still require substantially more support than just adding a 'depth' property to SVG.

[Danetone]

Well CSS is about how html is displayed, and it's come a long way from, "Hey, cool, now I can add my own font to my web page." It's already being used to make 3d objects like cubes. My idea was just about making it easier to do so. It wasn't really about turning it into a 3d modeling language. I know that's a horse of a different background-color there. But in this day and age, people want 3d more and more, and whatever can be done with it to accomplish that, will be done with it, regardless. I guess we'll just keep doing it the long-hand way. Anyway, thanks for considering.

On Fri, May 31, 2019 at 7:03 PM Tab Atkins Jr. notifications@github.com wrote:

Yeah, a retained-mode dedicated 3d graphics language can be useful, but would still require substantially more support than just adding a 'depth' property to SVG.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/w3c/csswg-drafts/issues/3984?email_source=notifications&email_token=AMGOSJZARNX5Y2TPTSAZIQDPYGVDPA5CNFSM4HQYCHG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWWSAMY#issuecomment-497885235, or mute the thread https://github.com/notifications/unsubscribe-auth/AMGOSJYFA5JIRLDYYEWZIILPYGVDPANCNFSM4HQYCHGQ .

[scottkellum]

@frivoal

we'll just keep opening more question: light source placement, projected shadows, bump maps

Just want to note that SVG filters handle all of these along with displacement maps and multiple lighting modes. These work on 3D transformed elements through CSS filters. However all these effects are still 2D and would require some significant re-working for 3D. The SVG lighting filters are probably closest to 3D as they define an X, Y, and Z axis, but these are attached to a 2D plane and not global.