Flipping JS

• Card Flip: onClick
• Card Flip: onHover
• Adding and Removing Flipping Cards
• Book Animation: 3D Animation
• Book Flip: Flip a page

Getting Started

Javascript

After downloading the module into your project, you can import the library into your script.

            import { 
                mainContainer, flipCardHover, flipCardClick, bookAnimation, bookFlip
            } from './CardAndBookFlipping/Flipping.js';
        
            mainContainer({});
            flipCardHover({
                width: 350,
                height: 200,
                transitionLength: 1
            });
            flipCardClick({
                width: 350,
                height: 200,
                transitionLength: 1
            });
            bookFlip({
                width: 200,
                height: 275,
                transitionLength: 0.75
            });
            bookAnimation({
                width: 200,
                height: 275,
                transitionLength: 1
            });
            

    <div class="mainContainer">
        [Insert Card/Book code]
    </div>

    <div class="card clickCard">
        <div class="frontCard">
            ...
        </div>
        <div class="backCard">
            ...
        </div>
    </div>

    <div class="card hoverCard">
        <div class="frontCard">
            ...
        </div>
        <div class="backCard">
            ...
        </div>
    </div>

    <div class="mainContainer allowEditCards"></div>

    <div class="bookContainer">
        <div class="book" id="book1">
            <img src="[IMG SOURCE]" alt="">
        </div>
    </div>

    <div class="bookFlip">
        <div class="flip">
            <div class="frontCover">
                ...
            </div>

            <div class="backCover">
                ...
            </div>    
        </div>

        <div class="contentCover">
            ...
        </div>
    </div>

Card Flip: onClick

(DEMO: Showing flipping the front and the back of the card by clicking on it)

Card Flip: onHover

(DEMO: Showing flipping the front and the back of the card by hovering on it)

Adding and Removing Flipping Cards

(DEMO: Adding and removing Card with the complex hover and click flip card functionality )

Book Animation: 3D Animation

(DEMO: Showing digital book in a book form )

Book Flip: Flip a page

(DEMO: Flip Book Page )

Quotes of the day

Fight

Content

Quotes of the day

Fight

Content

Quotes of the day

Fight

Content