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 dimensions. The general syntax is:
transform: effect(params)
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 setting the perspective scale to simulate the effect of the object advancing
toward the user or receding to a vanishing point. The lower the perspective value, the more
extreme the effect.
To apply a transformation style, select one of the transformation types from the drop-down list
below and then enter your parameter values. Each time you change a parameter value,
the transformation effect will be applied. The corresponding CSS style rule appears in the box below the
transformed object.