How to create a card flip effect on DIV using javascript

Question

I want to create a card flip effect (same as webkit transitions and 3d transforms) on DIV using simple javascript and CSS and NO libraries or plugins. How can I achieve this? As most of the CSS3 properties work for webkit browsers. And most of the javascript solutions uses libraries like jquery and its plugins. I am looking for a solution which doesn't use any library but only javascript/CSS and still works cross browser.

Any help would be appreciated.

Regards, manishekhawat

Answer 1

3d Transforms in CSS3 currently only work on webkit browsers. Sorry - there is no way to do this in other browsers without using a JS polyfill such as cssSandpaper ( http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ ).

This is not recommended though, as it will lead to a serious decrease in performance when loading the JS version.

3d Transforms and keyframe animations are still a (fairly) brand new feature of the CSS3 spec, and are therefore only adopted in the most up-to-date browsers (safari, chrome). If you want a cross-browser solution that doesn't requre javascript you're going to have to sit on your thumbs for a few years.

Answer 2

How to implement it:

CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.

The HTML

The HTML structure to accomplish the two-sided effect is as you would expect it to be:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

There are two content panes, "front" and "back", as you would expect, but also two containing elements with very specific roles explained by their CSS. Also note the ontouchstart piece which allows the panes to swap on touch screens.

The CSS

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

Here's a rough overview of the process:

• The outlying container sets the entire animation area's perspective

• The inner container is the element that actually flips, spinning 180 degrees when the parent container is hovered over. This is also where you control the transition speed. Changing the rotation to -180deg spins the elements in the reverse direction.

• The front and back elements are positioned absolutely so they can "overlay" each other in the same position; their backface-visibility is hidden so the back of the flipped elements don't display during the animation.

• The front element has a higher z-index than the back element so the front element may be coded first but it still displays on top

• The back element is rotate 180 degrees, so as to act as the back.

That's really all there is to it! Put this simple structure into place and then style each side as you'd like!

CSS Flip Toggle

If you'd prefer the element only flip on command via JavaScript, a simple CSS class toggle will do the trick:

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper 
{
    transform: rotateY(180deg);
}

Adding the flip class to the container element will flip the card using JavaScript -- no user hover required. A JavaScript comment like

document.querySelector("#myCard").classList.toggle("flip") will do the flip!

CSS Vertical Flip

Performing a vertical flip is as easy as flipping the axis and adding the transform-origin axis value. The origin of the flip must be updated and the card rotated the other way:

.vertical.flip-container {
    position: relative;
}

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container .flipper {
        transform-origin: 100% 213.5px; /* half of height */
    }

    .vertical.flip-container:hover .flipper {
        transform: rotateX(-180deg);
    }

You can see that the X access gets used, not the Y.

All credit goes to the Developer David Walsh, i have just reproduced the content.