css3d-wrapper
v0.2.1
Published
a react component which can set 3D effects on children components
Downloads
4
Readme
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 = () => (
<Css3dWrapper>
<SubComponent1/>
<SubComponent2/>
<SubComponent3/>
<SubComponent4/>
<SubComponent5/>
</Css3dWrapper>
)
# Demo can add 3D effects on SubComponnet1 ~ SubComponent5.
3D Effects
- support Grid and Overlap layout of SubComponents
- move SubComponent on XY plane through dragging the SubComponent by left-mouse-btn
- click SubComponent and transform it to the center of container by left-mouse-btn
- translate the camera on Z-axis through mouse-wheel
- rotate the camera around X-axis and Y-axis through dragging by left-mouse-btn
- in the step above, all the SubComponents' normal vectors are fixed.