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

Install

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

Usage

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