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).
over 1 year ago
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.
@David Luhman Thanks for the feedback man! Appreciate it
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
@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?
I think you're css3crazy, man. I really like penguins, too.
@Jake Fleming haha maybe I should do one in CSS3 :p
Dope, rad, love it!
Cool, how come you didn't use perspective though?
@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…
@Alex Cican shouldn't it still work in webkit and just look flat in FF?
@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
very good, but also was not in chrome
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)
*Just checked, its working in Firefox, just need overflow:hidden for the body because the flip animation gives firefox a scrollbar.
@Viszt Péter Nice one. Like the flip. Quite different than mine, maybe more correct :p
about 1 year ago
you are a css3 hero :) nice work.
11 months ago
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter