The CSS3 3D transformation styles assume the existence of a x-axis that runs horizontally
across the page, a y-axis that run vertically, and a z-axis that runs straight out of
the page towards the eye of the reader. This demo presents several transformation styles that
simulate the effect of altering a shape in three dimension. The general syntax is:
transform: effect(params)
where where effect is the transformation function that will be applied to the
object and params are any parameters required by the transformation. Most 3D transformations
also benefit from the setting the perspective scale to simulate the effect of the object advancing
towards the user or receding to a vanishing point. The lower the perspective value, the most
extreme the effect.
To apply a transformation style, select one of the transformation types from the drop-down list
below and enter your parameter values. The transformation effect will be applied each time you
tab out of an input box. The corresponding CSS style rule appears in the box below the
transformed object.
Note that many browsers do not yet support the CSS 3D transformations. You can view 3D
transformations using a WebKit browser such as Google Chrome or Safari. Other browsers may or
may not work depending on their version number.