css3d-wrapper

> a React component which can add 3D effects on the children component, implemented by CSS3 transform

Intallation

npm install css3d-wrapper

Example

./build/example.html

Use



  import React from 'react';

  import Css3dWrapper from 'css3d-wrapper';

  const Demo = () => (

    

      

      

      

      

      

    

  )

  # Demo can add 3D effects on SubComponnet1 ~ SubComponent5.

3D Effects

1. support Grid and Overlap layout of SubComponents
!Alt text
!Alt text
2. move SubComponent on XY plane through dragging the SubComponent by left-mouse-btn
!Alt text
3. click SubComponent and transform it to the center of container by left-mouse-btn
!Alt text
4. translate the camera on Z-axis through mouse-wheel
!Alt text
5. rotate the camera around X-axis and Y-axis through dragging by left-mouse-btn
!Alt text
6. in the step above, all the SubComponents' normal vectors are fixed.

css3d-wrapper

> a React component which can add 3D effects on the children component, implemented by CSS3 transform

Intallation

npm install css3d-wrapper

Example

./build/example.html

Use



  import React from 'react';

  import Css3dWrapper from 'css3d-wrapper';

  const Demo = () => (

    

      

      

      

      

      

    

  )

  # Demo can add 3D effects on SubComponnet1 ~ SubComponent5.