Like vanilla CSS's box model, but in 3D. The the transformation order is fixed: scaling, rotation and then transition.
depth is used to determine the dimension along z axis. The default value is zero.
The z axis points outwards from the screen. The default xy
plane's z
value is zero.
It is only used for layout calculation, not turning a <div>
into a box.
// A 800px by 800px by 800px cubic space.
.cube {
width: 800px;
height: 800px;
depth: 800px;
}
A plane is positioned inside a cube by specifying a principle plane (by default xy
. Can be xy
, yz
, zx
.)
And a value along the other axis (for x axis: left
& right
, y axis: top
& bottom
, z axis: front
& back
).
Besides front
and back
, z
can be used as well, ranging from -parent.depth/2
and parent.depth/2
.
If depth
is not specified in parent, any front
and back
value will have the same effect as z: 0
.
.cube {
//...
.planeXY {
plane: xy;
z: 30px; // 30px closer to the user
}
.planeYZ {
plane: yz;
left: 30px;
depth: 300px; // Set dimension along z axis
}
.plane {
translate: x y z; // Short hand for all 3 coordinates
}
}
Two more properties for z axies added for each:
margin-front
,margin-back
padding-front
,padding-back
border-front
,border-back
3 attributes added for specifying the Eular angles:
.plane {
rotationX: 3deg;
rotationY: 3deg;
rotationZ: 3deg;
rotation: x y z; // Short hand
}
Normal CSS layout attributes are applyed to the principle plane.
// TBD: layout along the other axis. Should all the planes be considered as 0 thickness?
// TODO: animation
Browser supports for flexbox and transform3d are the same: http://caniuse.com/#search=flexbox http://caniuse.com/#feat=transforms3d