CSS3 3D Transforms

Summary

• CSS 3D Transforms extends CSS Transforms to allow elements rendered by CSS to be transformed in three-dimensional space.

References

• Feature Wiki page
• W3 specification
• Webkit demo example

Use Cases

• Create 2D elements that can be moved and animated in 3D space (could be used to create interesting 3D UI elements). All the properties of this elements work properly.
• Preserve 3D elements when sorting them.
• Ensure transitions are supported for the properties that should support them (e.g. border-bottom-left-radius, box-shadow, background-color etc), and not supported for the rest (e.g. -moz-animation-duration, background-image, text-overflow etc).
• Try to use CSS3 3D Transforms with layout.3d-transforms.enabled set as "false".

Test Cases

• Manual test cases can be viewed here.
• Automated test cases:
  • Reftests in layout/reftests/transform-3d
  • CSS property tests in layout/style/test/test_transitions_per_property.html
  • layout/base/tests/test_preserve3d_sorting_hit_testing.html

Important Bugs

• 505115 - CSS3 3D-Transforms
• 677173 - css3-3d-transforms isn't fully disabled since properties (which sites detect) are added to IDL
• 677878 - no jquery action ellement on enabling css3 properties -moz-transform to ellement input[type=file]
• 682922 - Crash with -moz-transform-style: preserve-3d
• 696175 - Crash [@ nsLineBox::CachedIsEmpty] with inline acting as an absolute containing block
• 704468 - Wrong rotation direction for rotate3d(x,y,z,angle)
• 692968 - crash when doing javascript animation of 3D transform (css3-3d-transforms)

Not Tested

• Other CSS Transforms.

Sign off Criteria

• All test cases were run on the Firefox version the feature is targeted for (Firefox 10.0).
• All the major bugs have been fixed.