hypercube.css

react-usage.jsx

import React from 'react'
import Hypercube from 'react-hypercube'

// Use normal `style` attributes
class My3DComponent extends React.Component {
  render() {
    return (
      <div style={{
          width: '800px',
          height: '800px',
          depth: '800px',
        }}>
        <div style={{
            plane: 'xy',
            z: '30px'
          }}>
          {this.props.children}
        </div>
     </div>
    )
  }
}

// Higher-order component that:
// 1. Compiles CSS
// 2. Pass necessary contextual information down component tree
// 3. Polyfill animation and layout
export default Hypercube(My3DComponent)

spec.md

The Cube model

Like vanilla CSS's box model, but in 3D. The the transformation order is fixed: scaling, rotation and then transition.

Position

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

margin, padding and border

Two more properties for z axies added for each:

• margin-front, margin-back
• padding-front, padding-back
• border-front, border-back

Rotation

3 attributes added for specifying the Eular angles:

.plane {
  rotationX: 3deg;
  rotationY: 3deg;
  rotationZ: 3deg;
  rotation: x y z; // Short hand
}

Layout

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?

The 4th Dimension

// TODO: animation

Notes

Browser supports for flexbox and transform3d are the same: http://caniuse.com/#search=flexbox http://caniuse.com/#feat=transforms3d