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

In this illustration we show the before and after effects of a rotation of 30 degrees. Rotations can be postive or nnegative.
In this illustration we show the before and after effects of a rotation of 30 degrees. Rotations can be postive or nnegative.

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

In this example we move the rectangle down and to the right.
In this example we move the rectangle down and to the right.

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 height and width were multiplied by 2. Note the change in the border as well.
The height and width were multiplied by 2. Note the change in the border as well.

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

In this example we used the skew() method on both the x and y axis 15 degrees positive.
In this example we used the skew() method on both the x and y axis 15 degrees positive.
In this example we used the skew() method on both the x and y axis 15 degrees in a negative (counter-clockwise direction.
In this example we used the skew() method on both the x and y axis 15 degrees in a negative (counter-clockwise direction.

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)

The default values for matrix are 1,0,0,1,0,0 known as the 100 rule to remember it.
The default values for matrix are 1,0,0,1,0,0 known as the 100 rule to remember it.

matrix() Second Argument Skew to the Right

The matrix second argument has been changed to a positive value, so it skews to the right.
The matrix second argument has been changed to a positive value, so it skews to the right.

matrix() Third Argument Skews to the Left

Changing only the third argument results in a skew to the left.
Changing only the third argument results in a skew to the left.

matrix() Second and Third Arguments Opposite and Equal

Opposite and equal values for the second and third argument result in a rotation.
Opposite and equal values for the second and third argument result in a rotation.

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

matrix() fifth and sixth arguments results in a translation.
matrix() fifth and sixth arguments results in a translation.

matrix() First and Fourth Arguments Scale

Notice we can progressively build up the the skew, rotation, translation, and scaling
Notice we can progressively build up the the skew, rotation, translation, and scaling

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

Cast your vote for Please rate this tutorial and leave your comments

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working