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?

Answer 1

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

Answer 2

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