[Proposal] 3d CSS Property "Depth"


#1

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;}

#2

What’s wrong with having multiple elements?


#4

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.


#5

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