Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

2. Hacking with Style > Hack 25. Make iOS-Style Card Flips with CSS Transforms ...

Hack 25. Make iOS-Style Card Flips with CSS Transforms and Transitions

Wow your users with custom animations they are used to seeing in native applications. This hack shows you how to re-create a common iOS animation in CSS.

Mobile applications have increased our expectations when it comes to user experience, and Apple has led the way with its iconic and realistic applications. Apple has built a number of user patterns that work so well and make so much sense that we have come to expect them in all applications. One of those iconic patterns is the card flip. One of the most memorable uses of the card flip is in the iOS weather application, where it presents your weather on the screen, which has an “i” icon in the corner. When you tap on the “i”, the card flips over and allows you to configure it with the settings on the reverse (see Figure 2-45).


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint