

Create a CSS Flipping Animation - kurtable
http://davidwalsh.name/css-flip

======
jc4p
We've been using cards like this over at Fitocracy since our last redesign:
<http://i.imgur.com/Uy7mq.jpg> and our code looks pretty similar to that in
the page. Some caveats:

Firefox <5 doesn't support 3D CSS animations, and neither do most versions of
IE. For some reason, in our code, when CSS3 transformations aren't available
just the back of the card is shown and the text on is written in reverse (like
looking at it in a mirror). This also shows up on some versions of Chrome
where Chrome/Chromium just flat out decides your computer doesn't have a good
enough GPU and disables hardware acceleration (which if your computer can
actually handle you can bypass with a chromeflag), which made it a bigger
problem :(

We ended up having to do a fallback of the animation to do a fade-in/fade-out
on non supported devices, I wish CSS3 3D animations were ready for production.

~~~
melling
The good news is that only about 1% of users have an old Firefox (<5).

[http://gs.statcounter.com/#browser_version-ww-
daily-20120827...](http://gs.statcounter.com/#browser_version-ww-
daily-20120827-20120925-bar)

~~~
jc4p
This is absolutely not the case with my user base. A large portion of Firefox
users (<50% overall) was on 3.x

------
DanielRibeiro
A playground for more complete CSS 3d transformations:
<http://css3.bradshawenterprises.com/transforms/#cube3d>

------
nathos
If you're a Sass/Compass user, I implemented a similar effect as a mixin last
year: <http://nathos.github.com/flippy/>

------
ecesena
Cool! It maybe nice to rotate l2r or r2l wether you enter left or right. I did
it once with 2 back divs and js, but perhaps there is a cleaner (pure css?)
solution.

Moreover, on touch event, the rotation effect is the opposite one would
expect, meaning that if you touch/press (in the left most part) the card
"comes up".

