4 ms·

Create a CSS Flipping Animation

20 points by kurtable 14y ago

jc4p 14y ago
We've been using cards like this over at Fitocracy since our last redesign: http://i.imgur.com/Uy7mq.jpg 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 14y ago
  The good news is that only about 1% of users have an old Firefox (<5). http://gs.statcounter.com/#browser_version-ww-daily-20120827-20120925-bar http://gs.statcounter.com/#browser_version-ww-daily-20120827...
  - jc4p 14y ago
    This is absolutely not the case with my user base. A large portion of Firefox users (<50% overall) was on 3.x
DanielRibeiro 14y ago
A playground for more complete CSS 3d transformations: http://css3.bradshawenterprises.com/transforms/#cube3d http://css3.bradshawenterprises.com/transforms/#cube3d
nathos 14y ago
If you're a Sass/Compass user, I implemented a similar effect as a mixin last year: http://nathos.github.com/flippy/ http://nathos.github.com/flippy/
ecesena 14y ago
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".

20 points by kurtable 14y ago

jc4p 14y ago

We've been using cards like this over at Fitocracy since our last redesign: http://i.imgur.com/Uy7mq.jpg 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 14y ago
The good news is that only about 1% of users have an old Firefox (<5). http://gs.statcounter.com/#browser_version-ww-daily-20120827-20120925-bar http://gs.statcounter.com/#browser_version-ww-daily-20120827...
- jc4p 14y ago
  This is absolutely not the case with my user base. A large portion of Firefox users (<50% overall) was on 3.x

DanielRibeiro 14y ago

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

nathos 14y ago

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

ecesena 14y ago

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