CSS Transforms

2D transforms

• ​http://dev.w3.org/csswg/css3-2d-transforms/
• Supported in WebKit, Firefox, Opera
• Implemented via GraphicsContext
• Details:
  • Rendering and coordinate code should not assume elements are screen-aligned
  • coordinate conversion (RenderObject::localToAbsolute*)
  • implemented via RenderLayers

3D transforms

• ​http://dev.w3.org/csswg/css3-3d-transforms/
• Supported in WebKit (on certain platforms)
• Details
  • Extension of 2d transforms
  • Requires platform-suppored 3d-rendering capability (Accelerated Compositing)
  • Coordinate conversion and hit testing implemented in software
  • Rendering poorly specified
  • Implemented via GraphicsLayer
  • ENABLE(3D_RENDERING) (requires USE(ACCELERATED_COMPOSITING))

CSS Transitions

• ​http://dev.w3.org/csswg/css3-transitions/
• Supported in WebKit, Firefox, Opera
• Details
  • Interpolation when properties change
  • Implemented via AnimationController, KeyframeAnimation
  • Glue to offload some animations to GraphicsLayer

CSS Animations

• ​http://dev.w3.org/csswg/css3-animations/
• Supported in WebKit
  • Explicit animation
  • Implemented via AnimationController, ImplicitAnimation
  • Glue to offload some animations to GraphicsLayer