[Proposal] 3d CSS Property “Depth”

I have a proposal for a new 3d CSS Property: depth.

This would be used to make 3d objects easily in CSS. To make a cube:

div.cube {width:50px;height:50px;depth:50px;}

There are Five Pseudo-Elements:

div.cube::top {}
div.cube::bottom {}
div.cube::back {}
div.cube::left {}
div.cube::right {}

To make a 3d image cube you might do this:

div.cube {width:400px;height:400px;depth:400px;background-image:url("img1.png");}
div.cube::top {background-image:url("img2.png");}
div.cube::bottom {background-image:url("img3.png");}
div.cube::back {background-image:url("img4.png");}
div.cube::left {background-image:url("img5.png");}
div.cube::right {background-image:url("img6.png");}

These 5 pseudo elements are compatible with content, ::before, and ::after.

To make rounded 3d CSS corners, I think it should be vertex-radius. With this, spheres in CSS would be possible.

div.sphere {width:50px;height:50px;depth:50px;vertex-radius:50%;background-color:#446699;}
div.sphere::top {background-color:#446699;}
div.sphere::bottom {background-color:#446699;}
div.sphere::back {background-color:#446699;content: "Oh, hey you found me...";}
div.sphere::left {background-color:#446699;}
div.sphere::right {background-color:#446699;}

What’s wrong with having multiple elements?

Can you provide any use-cases as to how sites would use this? It seems like you’re simply tossing an idea out without any direct goals on how it improves the user experience beyond what is available today.

This is very specific to a “cube”. What will I write when I need a tetrahedron?

As much as I wish browsers would have awesome CSS 3D abilities, it will take a looooong time as far as I can tell. At the moment, we are better off using WebGL.

But I do believe browsers will get some cool new language features that will let us, for example, make custom properties and easily observe changes to them. This will let us write (polyfill) any of these proposals much more easily.

The need here is to be able to make custom properties, then to define custom rendering abilities for these custom properties.

I made a new thread about it here: So how DO we polyfill new CSS properties?

Basically, we’d write a custom property, make some custom elements, then based on CSS property changes we could update custom element rendering, where the custom elements might use Three.js/WebGL behind the scenes.

A well-known example of WebGL custom elements is A-Frame, but they don’t have the CSS aspect of custom properties. They do have their own MSS (mixin style sheet) system, which is similar to CSS. (That’s another option, make your own stylesheet system).

I think browsers will have the ability to easily react to custom property changes before they get any fancy 3D rendering properties. And this would be a good thing because community members could implement various rendering features, then browser vendors could later decide which ones are best and which ones to base new features from.