react-animated-3d-card

> Animated 3d card that reacts to the user's mouse pointer

Each component that is a child to the Card component will be animated in 3d, the top one being flush with the card and each subsequent one higher than the one on top of it

Code
Demo

!Credit card

 

Install

``bash
npm install --save react-animated-3d-card
`

Usage

`jsx
import React, { Component } from 'react'

import Card from 'react-animated-3d-card'

class Example extends Component {
render() {
return style={{
backgroundColor: 'red',
width: '450px',
height: '300px',
cursor: 'pointer'
}}
onClick={() => console.log('Card clicked')}
/>
}
}
``

Available props

| Props | Type | Default value | Explanation |
| ------------- | ------------- | ------------- | ------------- |
| style | Object | {} | The style that will be applied to the card |
| onClick | Function | - | The function that will run when the card is clicked |
| borderRadius | String | '20px' | The radius of the card |
| isStatic | Boolean | false | Whether the card is transformed in 3d or not |
| shineStrength | Number | 0.4 | The strength of the shine from 0 to 1 |
| cursorPointer | Boolean | true | Whether the cursor is a pointer or not |

Example

License

MIT © jamipuchi