Card Flip CSS3 & HTML5

17 Responses

1. Pro Alex Cican

   Check it out: http://lab.sicanstudios.com/card_flip/

   Decided to rebound @Garrett Gee ’s shot with my version.

   The card flip is done using only CSS3 (transitions and rotation).

   Any thoughts?

   about 1 year ago

2. Pro David Luhman

   Wow, your the only rebound for this? I really like the hover transition for the buttons. I also really like that you use your own shadow for the card :) the animations are all very smooth and clean.

   ♥ rgba

   1likes

   about 1 year ago

3. Pro Alex Cican

   @David Luhman Thanks for the feedback man! Appreciate it

   about 1 year ago

4. Pro Bill Labus

   This is incredibly nice. One suggestion- right now the card flip lacks 'depth' in the animation (it's a bit flat). Try using the '-webkit-perspective' property for the transition to add more of a 3D effect to it. Here's some more info on it: http://dropshado.ws/post/1301087289/webkit-transform-perspective-function

   1likes

   about 1 year ago

5. Pro Alex Cican

   @Bill Labus Thanks for the comment! I agree that it’s a little flat. I’m using Firefox so, I haven’t had the pleasure of doing webkit only coding.

   But I have a question for you. Do you get an error in Chrome/Safari when you flip the card and try to hover the links (“About”, “Facebook”) on the left part of the card? Can you click on them?

   about 1 year ago

6. Pro Jake Fleming

   I think you're css3crazy, man. I really like penguins, too.

   1likes

   about 1 year ago

7. Pro Alex Cican

   @Jake Fleming haha maybe I should do one in CSS3 :p

   about 1 year ago

8. Pro Bastien Wilmotte

   Dope, rad, love it!

   1likes

   about 1 year ago

9. Pro Arron J. Hunt

   Cool, how come you didn't use perspective though?

   1likes

   about 1 year ago

10. Pro Alex Cican

    @Arron ☁ Hunt I wanted it to work for Firefox. Was having issues with it (not that now it doesn’t have issues). All in all, my conclusion from this project was that browsers still need to catch up on 3D stuff…

    about 1 year ago

11. Pro Arron J. Hunt

    @Alex Cican shouldn't it still work in webkit and just look flat in FF?

    about 1 year ago

12. Pro Alex Cican

    @Arron ☁ Hunt Yeah, thought of that. I’ll fix it when I’ll find the time. In the meantime check out this: http://dl.dropbox.com/u/48552248/websites/demos/switch/index.html This one works great :p

    1likes

    about 1 year ago

13. Andrey S. Rodrigues ☝

    very good, but also was not in chrome

    about 1 year ago

14. Viszt Péter

    I did the same thing on the same day when Garrett posted the "job", everything is css3(i only checked in Safari and Chrome, should be fine in Firefox too)

    http://visztpeter.me/Develop/scan/

    *Just checked, its working in Firefox, just need overflow:hidden for the body because the flip animation gives firefox a scrollbar.

    1likes

    about 1 year ago

15. Pro Alex Cican

    @Viszt Péter Nice one. Like the flip. Quite different than mine, maybe more correct :p

    about 1 year ago

16. Pro Yura Yarokhovich

    Lovely!

    1likes

    8 months ago

17. Pro Abinash Mohanty

    you are a css3 hero :) nice work.

    1likes

    4 months ago