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.