Flip card effect for non-webkit browsers

Question

So I have been looking for the flip card effect. There are a number of nice examples that work well with webkit browsers. For example:

http://www.ilovecolors.com.ar/wp-content/uploads/css-card-flip-webkit/click.html

But I have found none that works with Internet Explorer/Firefox as well. Do you guys perhaps have an example where a similar flip effect is done?

You could fake it somewhat by just horizontally shrinking a div, then growing another one to show the "back" of the card. It'd probably look rather ugly, but would work anywhere jquery's available. — Marc B, Jun 07 '11 at 16:29
hey thanks for your reply. quick flip (http://dev.jonraasch.com/quickflip/examples/) does something similar like you described. and indeed does not look very neat. the aim of the website I am working on is more to look fancy than being functional, so scaling would not be an option unfortunately.. — dandoen, Jun 07 '11 at 16:43

Sparky · Accepted Answer · 2013-04-01T23:43:55.023

23

This seems to fit the bill...

http://lab.smashup.it/flip/

Quote: Flip is compatible with: Firefox, Chrome/Chromium, Opera, Safari and even IE (6,7,8)

Here is another one...

http://dev.jonraasch.com/quickflip/examples/

http://jonraasch.com/blog/quickflip-2-jquery-plugin

There is no "flip" in this one, but perhaps you'll find this helpful in another way...

http://malsup.com/jquery/cycle/browser.html

This one seems powerful, but you'll have to program the flip yourself...

https://github.com/heygrady/transform/wiki

edited Apr 01 '13 at 23:43

answered Jun 07 '11 at 16:28

Sparky

98,165
25
199
285

Hey, thanks. Flip looks allright. The only problem ofcourse is that the content is only loaded when the div is flipped. My goal was more to see the actual content during the flip. As for Quickflip, I found these as well. Personally I think they don't look very nice. I was hoping to get the same "feeling" like the link I posted. Thanks for the reply anyway! – dandoen Jun 07 '11 at 16:40
@dandoen: I see. If you already found a bunch and rejected them for that particular issue, it would have been helpful to mention that critical requirement in your question. – Sparky Jun 07 '11 at 16:45
True, sorry for this. I was in a hurry and could not find the links back. – dandoen Jun 07 '11 at 16:47
@dandoen: I added another link to my answer. – Sparky Jun 07 '11 at 20:17
1

you're the best. the heygrady seems like what I am searching for, I'll have a look at it right away. thanks. – dandoen Jun 07 '11 at 21:33

Adam Fraser · Answer 2 · 2012-12-13T18:58:20.960

There are -moz prefixes that should let you accomplish what you're trying to do.

See here: http://css3playground.com/flip-card.php

Try adding -moz variants of all the -webkit magic here: http://jsfiddle.net/nicooprat/GDdtS/

Or... if you're using Compass (http://compass-style.org) and Sass (sass-lang.com) like me, this works nicely in Chrome, Safari, and FF.

HTML

<div class="flip"> 
    <div class="card"> 
        <div class="face front"> 
            Front
        </div> 
        <div class="face back"> 
            Back
        </div> 
    </div> 
</div>

SASS with compass mixins

(http://compass-style.org/reference/compass/css3/transform/)

.flip
  position: relative
  +perspective(800)
  width: 80%
  height: 200px

.flip .card.flipped
  +transform(rotatex(-180deg))

.flip .card
  +transform-style(preserve-3d)
  +transition(0.5s)
  width: 100%
  height: 100%

.flip .card .face
  position: absolute
  z-index: 2
  +backface-visibility(hidden) 
  width: 100%
  height: 100%

.flip .card .front
  position: absolute
  z-index: 1

.flip .card .back
  +transform(rotatex(-180deg))

// Make it at least functional IE
.flip .card.flipped .back
  z-index: 0

Some people have rejected this answer because the js-fiddle doesn't work in non-webkit. Please actually READ my answer. I said to add -moz prefixes to the webkit styles on that fiddle. The real value in this post is the SASS+compass solution which is much cleaner to look at and works widely. — Adam Fraser, Aug 06 '13 at 18:42
This still doesn't work for IE. Whereas Sparky's answer covers many different browsers — brimble2010, Feb 16 '15 at 17:07

score 4 · Answer 3 · answered Feb 16 '14 at 05:28

4

Check out this blog post from David Walsh: http://davidwalsh.name/css-flip

It has some great code for creating a flip effect that works on multiple browsers.

answered Feb 16 '14 at 05:28

Barlow Tucker

6,229
3
36
42

Tinclon · Answer 4 · 2015-01-17T21:22:08.170

I also couldn't seem to find a good example of this anywhere, so I spent ~~some~~ way too much time making my own.

This one works on all browsers, does not have that weird 360deg IE flip, and includes provision for static content (that lives on both sides of the card - which I needed to put a 'flip' button at the top right of both sides).

--I tested on latest versions of Chrome, Firefox, Safari, Opera, and IE.

http://jsfiddle.net/Tinclon/2ega7yLt/7/

Edit: Also works with transparent backgrounds: http://jsfiddle.net/Tinclon/2ega7yLt/8/

The css (of course) includes IE hacks, so it's a bit long, but the html is quite straightforward:

<div class="card">
  <div class="content">
    <div class="cardFront">FRONT CONTENT</div>
    <div class="cardBack">BACK CONTENT</div>
    <div class="cardStatic">STATIC CONTENT</div>
  </div>
</div>

$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));

.card {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    margin:80px 150px;
    width:320px;
    height:243px;
    vertical-align:top;
    position:absolute;
    display:block;
    font-size:25px;
    font-weight:bold;
}

.card .content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    /* content backface is visible so that static content still appears */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;


    border: 1px solid grey;
    border-radius: 15px;
    position:relative;
    width: 100%;
    height: 100%;

}
.card.applyflip .content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}


.card .content .cardStatic {
    /* Half way through the card flip, rotate static content to 0 degrees */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);

    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    line-height:100px;
}

.card.applyflip .content .cardStatic {
    /* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront {
    background-color: skyblue;
    color: tomato;
}

.card .content .cardBack {
    background-color: tomato;
    color: skyblue;
}

.card .content .cardFront, .card .content .cardBack {
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height:200px;
    border-radius: 14px;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

.card .content .cardBack, .card.applyflip .content .cardBack {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront, .card.applyflip .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }

This is amazing! worked in IE too perfectly. Now, can you please help me with one more thing? Inside, cardFront and cardBack, I have put images which height are not fixed. For responsiveness, I can't give fixed height in card too. For being absolute position in cardFront & cardBack, card can't get height of their childrens. But, I need the height of card. Because, there are multiple cards. For not getting height, one card is overlapping another. I've taken the height with jQuery though it's not working at some device like iphone properly. So, is there any way at your code not using absolute? — user1896653, Apr 27 '16 at 19:24
This works great! However, I do want to know if this would be compatible on mobiles though? — Krys, Jun 02 '16 at 11:25
I am having trouble making this work locally.. Where should I position [$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));] in the html document? and do I need to link to jquery for it to flip? — Krys, Sep 12 '16 at 03:19
It's working on most of latest browsers . but IE9 it's not working . — Ashish, Oct 12 '16 at 16:31

score 0 · Answer 5 · answered Sep 17 '13 at 02:27

0

I was trying to use this http://blog.guilhemmarty.com/flippy/, you can have a try.

answered Sep 17 '13 at 02:27

jeswang

1,017
14
26

Flip card effect for non-webkit browsers

5 Answers5

HTML

SASS with compass mixins

Linked