@mikekorakakis/react-3d-animated-card v1.0.12

@mikekorakakis/react-3d-animated-card

This is a fork from @sl-codeblaster/react-3d-animated-card. It uses ids instead of classes to identify the elements so that it can work with server-side-rendering. The firefox issues were also fixed.

3D Animated card component for ReactJs.

Install

with npm

npm install --save @mikekorakakis/react-3d-animated-card

with yarn

yarn add @mikekorakakis/react-3d-animated-card

You should need to import css file to your css file.

@import "@mikekorakakis/react-3d-animated-card/dist/index.css";

##Usage

<AnimatedCard
    config={{
        rotation: 15, // this value for the divide (window.innerWidth / 2 - e.pageX) / rotation && (window.innerWidth / 2 - e.pageY) / rotation
        transition:{
            duration:0.5,
            timingMode: "ease"
        },
        transform:{
            figureIcon: {
                rotation: 20,
                translateZ: 160
            },
            titleTranslateZ: 140,
            bodyTextTranslateZ: 100,
            buttonTranslateZ: 80
        }
    }}
    style={{
        width:560 //container style (you can use className as well)
    }}
>

    <div className="card" id="card_3d">
        <div className="figure" id="figure_3d">
            <div className="figure_bg" id="figure_bg_3d"/> // not required, just used for design
            <img src={require('./images/image.png').default} alt=""/>
        </div>
        <div className="content" id="content_3d">
            <h2 className="title" id="title_3d">Animated Card</h2>
            <p className={"body"} id="body_3d">Lorem Ipsum is simply dummy text of the
                printing and typesetting industry</p>
        </div>
        <div className="footer"  id="footer_3d">
            <button className={"footer_btn"} id="footer_btn_3d">BUTTON</button>
        </div>
    </div>

</AnimatedCard>

##Configuration use config prop to pass configuration object to the component.

transition object

transform object

figureIcon object