cube-creator/README.md

Makes cube from any div element with parallax

# cube-creator
Look [Demo](https://alexeykrotkov.github.io/cube-creator/ "by Alexey Krotkov")
## 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](https://github.com/AlexeyKrotkov/cube-creator "by Alexey Krotkov")

![Cube is created via module](./resourses/cube-image.png)

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