Building an Advanced iPhone Web Application, Hands On

Wed,6/11 15:30
  • Using simple CSS Transitions
  • Advanced CSS
How to make a 3D Tutor
  • add 3D transform
  • remove backfaces
  • add a Child to ring
  • Center Element On its
  • Offset the element Z
  • add A Second Element
  • Offset That one
  • Add the rest of the elements
  • hide the backfaces
3d Transforms
  • -webkit-transform
Giving a sense of depth
  • -webkit-perspective

How to Turn off the

Task list
  • Detect selection of an item via a single finger tap
  • slide the ring and info pane togeter
And use this webkit APIs
  • .touchMoved
  • translate_X()
Rotate the ring to center the selected item

performSelection = function(){
this,currentItem.index * (FULL_ROTATION / NUM_POSTERS)

if (!immediate_selection){



How to play movie following user interaction

Use CSS Transforms to lat the ring out in 3D
Add touch events for dragging interactivity

Selection highlight
Landscape mode
Flicking with CSS animations
Selecting a rating with touch events
Custom hit testing

download at attendee in WWDC

0 评论: