Course Technology Cengage Learning New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 4

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.

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 automatically applied to the image in the Preview box, each time you change a parameter value. The corresponding CSS style rule is displayed in the Style box below.

CSS3 Transformations

Transformation

Preview

Style

none