cube-creator

Look Demo

Installation

Using npm:

$ npm i --save cube-creator

Using

To create cube without effects pass key DOM element and parentElement to constructor. "element" must have width and height.

const cube3D = new CubeMaker(element, parentElement);

To create cube or upgrade existing cube with parallax effect use

const cube3D = new CubeMaker(element, parentElement);
const parallax3D = new WithParallax3D(cube3D);

Configure your cube

CubeMaker object has many props to control. It's default props config onto library.

optionsDefault = {
  isAutoClone: true,  // clone source element to all sides
  isAutoColors: true, // color all sided (besides front side)
  isAutoTransformOrigin: true, // transform-origin is centered by default
  rotate: [0, 0, 0], // default 3D rotate
  sides: { // pass your HTML elements here
    front: null,
    right: null,
    left: null,
    top: null,
    back: null,
    bottom: null
  },
  dimensions: {
    depthZ: 200 // set depth of cube in px
    // width and height will set by width and height of passed source element
    // now widht and height don't adaptive
  },
  classNames: { // class names of inner wrapper that cube generate
    cubeWrapper: 'cube-wrapper',
    cubeContainer: 'cube-container',
    cubeSide: 'cube-side'
  }
};

WithParallax3D class decorator has following props

optionsDefault = {
  rotate: [0, 0, 0], // default rotate and reset rotate values
  resetTransformRotateWithoutMovingTime: 1500,
  resetTransformRotateOnMouseOutTime: 50,
  disableTransformAnimationMouseOutTime: 300,
  throttleMouseOverTime: 0 // disabled by default,
  parallaxFactors: { // frequency of the parallax effect
    x: 5,
    y: 5
  }
};

All props from this object are configurable.

CSS using with cube-creator

Just use existing class names of cube and CSS selectors to configure every side

Examples

Look examples and source code on GitHub

I will improve this package to arrive more control of params and increase the level of optimization. Please, wait for a little.