Course Technology Cengage Learning New Perspectives on HTML and CSS
Tutorial 8

CSS3 Transformation Styles

The CSS3 transformation styles are used to transform the appearance of a page object using one of the following transformation effects: translation (to move the object horizontally and/or vertically), scale (to increase or decrease the size of the object in the horizontal or vertical direction), skew (to skew the object by a specified angle in the horizontal or vertical direction), rotate (to rotate the object clockwise or counter-clockwise), or matrix (to apply a matrix transformation to the object.) To use a CSS3 transformation, you apply the style:

transform: effect(params)

where where effect is the transformation function that will be applied to the object and params represents any parameters required by the transformation. You should also include styles with browser extensions so that the transformation will appear in all popular browsers.

To apply a CSS3 transformation, select one of the transformation types from the drop-down list below and enter your parameter values. The transformation effect will be applied to the image in the Preview box, each time you tab out of an input box. The corresponding CSS style rule is displayed in the Style box below.

CSS3 Transformations

Transformation

Preview

Style

none