Effecting Flip Animation With CSS

Of all the exceptional features CSS is credited for, the animations achieved by it truly stand out. The sheer variety of animations you can create using CSS makes it hotly pursued among designers who love to bring the house down with some reverberant elements to their designs.

We are going to focus here on one of the most popular effect – the flip effect – that can be applied using CSS in a manner most flamboyant. So, without further ado, let us check out the series of steps required to create the flip effect in a simple enough process:

HTML

Let’s have a look at the HTML code that will be used to implement this flip effect:

<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>

We have content panes here and it is also to be understood clearly that on touch start allows these panes to swap as soon as activity on touch screen is triggered. For better understanding, we can also break the code into JavaScript blocks. Anyways, let’s have a glance at the CSS involved here:

/* 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);
}

The perspective of the animation area is primed up by the outer container while the element on which flipping takes place is represented by the inner container. The transition speed can also be controlled from here, and seamlessly so. The position of the front and back elements is absolute. The z-index in the back element is lower than that in the front element and the back element can also rotate by 190 degrees.

So, this is basically the crux of it all. Now, we can experiment with some movements and animations.

Effecting the CSS Flip Toggle

Now, when flipping the element via JavaScript is on the agenda, you can use the CSS class toggle:

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

The flipping of the card can be brought into effect by adding flip class to the container element.

Effecting the CSS Vertical Flip

All you got to do here is to simply flip the axis and follow it by adding transform-origin.

.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);
}

Through this code, we are using the X access only.

Ensuring Compatibility with Internet Explorer

It is no concealed fact that to achieve the flip effect on the Internet Explorer, you need to make certain code alterations since it is not compatible with the latest animation and transform properties. Talking from the root level, we need to flip the front and back elements simultaneously:

/* entire container, keeps perspective */

.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */

.flip-container:hover .back {
    transform: rotateY(0deg);
}
.flip-container:hover .front {
    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;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}
/*  UPDATED! front pane, placed above back */

.front {
    z-index: 2;
    transform: rotateY(0deg);
}
/* back, initially hidden pane */

.back {
    transform: rotateY(-180deg);
}
/*
Some vertical flip updates
*/

.vertical.flip-container {
    position: relative;
}
.vertical .back {
    transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
    transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
    transform: rotateX(180deg);
}

The CSS flip animations truly represent the exceptional capabilities of CSS in its full glory. What stands out that the code involved in the whole exercise is not heavy.