Card Flip CSS3 & HTML5

Card_flip

17 Responses

  1. Alex Cican 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?

    likes

    almost 2 years ago

  2. David Luhman 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

    likes

    almost 2 years ago

  3. Alex Cican Alex Cican

    @David Luhman Thanks for the feedback man! Appreciate it

    almost 2 years ago

  4. Bill Labus 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

    likes

    almost 2 years ago

  5. Alex Cican 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?

    almost 2 years ago

  6. Jake Fleming Jake Fleming

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

    likes

    almost 2 years ago

  7. Alex Cican Alex Cican

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

    almost 2 years ago

  8. Bastien | blackcreative.co Bastien | blackcreative.co

    Dope, rad, love it!

    likes

    almost 2 years ago

  9. Arron J. Hunt Arron J. Hunt

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

    likes

    almost 2 years ago

  10. Alex Cican 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…

    almost 2 years ago

  11. Arron J. Hunt Arron J. Hunt

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

    almost 2 years ago

  12. Alex Cican 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

    likes

    almost 2 years ago

  13. Andrey S. Rodrigues ☝ Andrey S. Rodrigues ☝

    very good, but also was not in chrome

    almost 2 years ago

  14. Viszt Péter 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.

    likes

    almost 2 years ago

  15. Alex Cican Alex Cican

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

    almost 2 years ago

  16. Yura Yarokhovich Yura Yarokhovich

    Lovely!

    likes

    over 1 year ago

  17. Abinash Mohanty Abinash Mohanty

    you are a css3 hero :) nice work.

    likes

    about 1 year ago

keyboard shortcuts: previous shot next shot L or F like