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
Install
npm install --save react-animated-3d-cardUsage
import React, { Component } from 'react'
import Card from 'react-animated-3d-card'
class Example extends Component {
render() {
return <Card
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