CSS3 3D transformed elements, perspective and perspective-origin

Browser support (3rd June 2011): Safari (iPhone and iPad untested).

Notes:

• The default values on page load are 'perspective: 400' and 'perspective-origin: center'.
• The 'perspective-origin' is derived from the element (with gray border) that is the parent of the rotated element. Since the parent is larger than the rotated child, the 'perspective' and 'perspective-origin' are more acute.
• The top left corner of each example has a set of buttons to change 'perspective-origin'.
• The top right corner of each example has a set of buttons to change 'perspective'.
• Selecting the value 'none' for 'perspective' disables all the other options for 'perspective' and 'perspective-origin' (This is what Chrome 11 currently shows).

My own experimentation shows some interesting results.