Enhancing Your iPhone Web Application with CSS Transforms and Animations

Wed,6/11 15:30

New CSS Properties
  • Presentational
  • Graceful detonation
Refresher on 2d transforms and Transitions

  • translate()
  • rotate
  • scale
  • origin
  • top
  • left
  • skew

Change origin via
  • -webkit-transform-origin:
CSS keyframe Animations

@-webkit-keyframes 'fall' { };
@-webkit-keyframes 'swing' { };

-webkit-animation-name: 'fall';
-webkit-animation-duration:' ';
-webkit-animation-iteration-count:' ';
-webkit-animation-direction:' ';
-webkit-animation-timing-function:' ';

Safari 3.1 showed us CSS transforms, which are 2D. On the iPhone though, we can now do 3D transforms which means you can do true coverflow through the browser.The other new thing I found are new touch screen events. We already knew about the ongesture* events, but now there are ontouch events, and new DOM interfaces Touch, TouchList, and TouchEvent.This is great progress.

3D Transforms only in iPhone's Safari 2.0

  • rotateY(*deg)
  • rotateX(*deg)
  • translateZ(*deg)
  • translate3d(x,y,z)
  • rotate3d()-rotate about the (x,y,z) vector

  • flat
  • preserve-3d
-webkit-perspctive : ;

Hide backface :

-webkit-backface-visibility: ;

Advanced 3D
  • -webkit-transform:matrix3d(...);
  • WebKitCSSMatrix()

1 评论:

Anonymous said...