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

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

• javascript
• css
• flip
• flipboard

• 3 thats a quite a tall order for cross browser. – Daniel A. White Commented Jan 23, 2012 at 13:18
• 4 You'll end up recreating existing libraries. What is the problem with using a library? – Octavian Helm Commented Jan 23, 2012 at 13:26
• 1 @OctavianDamiean There is no problem in using libraries, just that client doesn't want any external libs, everything homemade. – manishekhawat Commented Jan 23, 2012 at 13:50
• 3 Why do you think jQuery wouldn't be cross-browser? – Octavian Helm Commented Jan 23, 2012 at 13:53
• 4 I wrote a card flip game that worked perfectly across all desktop browsers (back to IE6) and mobile devices using jQuery, and this plugin - lab.smashup.it/flip. – Dan Blows Commented Jan 23, 2012 at 14:06

2 Answers 2

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./blog/csssandpaper-a-css3-javascript-library/ ).

This is not remended 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.

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 acplish 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 mand 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 ment 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.