run example with yarn && yarn start
, or just visit https://hturan.com/three-stacks
move mouse / tilt device to alter perspective offset, mouse wheel to alter perspective depth
<ThreeStacks />
expects four props —
x
— an array of values to render across the x-axisy
— an array of values to render across the y-axisz
— an array of values to render across the z-axisrender
— a render function that takesx
,y
, andz
values and returns a component
like so —
<ThreeStacks
x={borderWidths}
y={borderStyles}
z={colors}
render={(x, y, z) => (
<Button
style={{
borderStyle: y,
borderWidth: x,
borderColor: z,
color: z
}}
/>
)}
/>