5

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

manishekhawat
  • 699
  • 3
  • 12
  • 18
  • 3
    thats a quite a tall order for cross browser. – Daniel A. White Jan 23 '12 at 13:18
  • 4
    You'll end up recreating existing libraries. What is the problem with using a library? – Octavian Helm Jan 23 '12 at 13:26
  • @Daniel, Yes I agree. I was looking for a such solution for a long time. But always end up at webkit transform or some jquery plugin. Unfortunately I cannot use these this time as the solution should be cross browser. – manishekhawat Jan 23 '12 at 13:49
  • 1
    @OctavianDamiean There is no problem in using libraries, just that client doesn't want any external libs, everything homemade. – manishekhawat Jan 23 '12 at 13:50
  • 3
    Why do you think jQuery wouldn't be cross-browser? – Octavian Helm Jan 23 '12 at 13:53
  • @Madmartigan Yes, didn't put in any code. I was searching for some help if this could be possible to do it in easy way. Though my plan is to slim the div width on mouseover till 0px and then again increase it back to the original size going in a loop. It is just a plan, i don't know if it will work. – manishekhawat Jan 23 '12 at 14:02
  • @OctavianDamiean sorry for that, that comment was targeting webkit transform. couldn't explain it properly – manishekhawat Jan 23 '12 at 14:03
  • 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 - http://lab.smashup.it/flip. – Dan Blows Jan 23 '12 at 14:06
  • 1
    that plugin seems to work well, just a note - thats basically a polyfill - something that emulates modern functionality for browsers that don't support it... Also, if the client is telling you not to use external resources, they're basically asking to pay 2x as much money. You should inform your client that using existing libraries (instead of reinventing the wheel 20 times over) is actually a good thing. – 1nfiniti Jan 25 '12 at 16:37
  • @OctavianA.Damiean Libraries are, quite possibly, the bane of my existence. Libraries take up storage and make websites slower. As well, maybe the OP wanted to do this as a programming exercise. –  Jan 10 '21 at 14:21

2 Answers2

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.

  • Please add some details on how to implement this in the event that the link dies. Link only answers do not fare well here. – krillgar Mar 04 '15 at 19:57
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.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.

1nfiniti
  • 2,032
  • 14
  • 19