CSS3 Backgrounds on 3D transformed element using SVG and transition

Hint: Hover the images below.

Browser support (25th May 2011).

• Safari: Shows as expected apart from the first example failing due to use of semi-transparent backgrounds (using embedded CSS) in the SVG. Focus for iPhone is untested.
• Chrome: Shows some support but fails with 3D perspective.
• Firefox 4 / Aurora: Support for 3D transforms is expected soon.
• IE10: Support for 3D transforms is expected in later version of IE10 preview.
• Opera: Support for 3D transforms is expected (hoping). Currently the SVGs are blured.

Test 1

Test 2

The below test are the same as above but with a transition of background-size and background-position.

Test 3

Test 4

• Cutting Edge CSS3 (directory)
• CSS3 (directory)
• CSS3 index page
• CSS Class Test