# A CSS 3 Tutorial: 2D Special Effects

## Goals of This Tutorial: Learn About CSS3 2D Transformations

The two dimensional CSS method to create special effects are known as transformations. They allow you to change size, location, and shape of objects.

The five methods are:

**rotate** - the element can be change by any number of degrees

**scale** - which allows you to change the height, width or both height and with of an element

**skew** - which allows you to skew an element on either the X-coordinate, Y-coordinate or both

**translate** - which allows you to change the X and Y coordinates of an HTML element

and a matrix method which allow you to combine the rotate, scale, skew and translate methods.

## Background of How New Features Are Added to Browsers

To understand the examples which follow one needs to have a little background of how they are introduced in the various browsers available.

For Microsoft Internet Explorer when a new extension becomes availabe its name is preceded by -ms-*extension_name. *So in the preceding section each of the methods mentioned wouldbe specified as:

-ms-tranform:*method_name. *For example, the rotate method would be defined as:

-ms-tranform:rotate.

Similarly, Chrome, Firefox, Opera in early versions of their browsers would be specified as -webkit-. -moz-, and -o- respectively and in later versions as -webkit-.

The final version of the name in the unified standard drops the prefix names (i.e. -ms-, -o-,

-moz-, -webkit- are eliminated. This is why the examples which follow have three versions of the method defined.

## The rotate() Method

The rotate() method takes one argument, the number of degrees or rotation.The element rotates clockwise at a given positive number of degree. Negative values are allowed and rotates the element counter-clockwise.

## Illustration of the rotate() Method Before and After

## The translate() Methods

There are three versions of the translate method:

- translateX(n) - a 2D translation, moving the element along the X-axis

- translateY(n) - a 2D translation, moving the element along the Y-axis

- translate(x,y) - a 2D translation, moving the element along both the X-axis and the Y-axis.

The values are specified in pixels. Negative valuse shift to the left and up. Positive to down and the right of the screen.

## Illustration of the Translate() Method

## The scale() Methods

Again we have three methods defined:

**scaleX(n)** - a 2D scale transformation, changing the element's width

**scaleY(n)** - a 2D scale transformation, changing the element's height

**scale(x,y)** - 2D scale transformation, changing the elements width and height

Values are a multiplication factor. **scaleX**(3) would increase the size 3 fold. **scaleX**(0.25) would cause the width to be 1/4 of the original size.

## Illustration of the scale() Method

## The skew() Methods

Again there are three defined methods:

**skewX(angle)** - 2D skew transformation along the X-axis

**skewY(angle)** - 2D skew transformation along the Y-axis

**skew(angle-X,angle-Y) **- 2D skew transformation along the X- and the Y-axis

## Illustration of the skew() Method

## The matrix() Method

The matrix() method is the tricky one to try to understand. You can do all of the operations: rotate, translate (move), scale and skew mby manipulating six values.

The **default state** is represented by **transform:matrix(1,0,0,1,0,0)**; Just remember the "100 rule".

The **second** and** third** arguments can be used to skew the element, if used singly. Changing one argument skews the element to the right. Changing only the other argument skews the element to the left.

Using the second and third arguments, one** positive** and one **negative** of equal value **rotates** the element.

The **first** and **fourth** arguments **scale** the element.

Remember that transitions can also be specified in combinations as well (which might be easier than the matrix "shorthand").

The following snapshots show various combinations of the six arguments.

## Default transform:matrix(1,0,0,1,0,0)

## matrix() Second Argument Skew to the Right

## matrix() Third Argument Skews to the Left

## matrix() Second and Third Arguments Opposite and Equal

## matrix() Fifth and Sixth Arguments Results in a Translation, a move

## matrix() First and Fourth Arguments Scale

## The transform-origin() Property

By default, the transform property performs its actions around the center of the element be set to the coordinate value (0,0). Transform operations are also order operations. The net result of this is that at times multiple transformations and the order in which they are performed can result in undesirable results. This forms the basis of using the transform-origin property.

What sometimes needs to happen is to set the transform-origin property to be anchored differently, perhaps from the "top left" or "bottom right" point of the element being transformed. In other words, for a rotation, for example, we would spin the image for that new anchor pint and not from the center of the element.

## Wrap Up and What's Next

This pretty much takes care of the CSS 3 2D properties. The suggestion would be to work out a number of simple examples. Create a rectangular area (or multiple areas) and work with transformations differing the order in which they are applied.

What's next? It seems like a good idea at this poin to look into CSS 3 three dimensional transformations.

## Please Rate This Tutorial On How Well It Fits Your Needs

## Comments

No comments yet.