BASEWEBMASTER

Brought To You By
Tomlin Ventures Ltd

Transform Property CSS3

Introducing The CSS3 Transform Property

One of CSS3's more interesting new functions is without a doubt the transform property. The basic idea is that it allows a designer to directly change the appearance, orientation and size of an element.

The web is, on the whole; a fairly static medium where pages rarely move or animate their content When they do this is done with complex javascript or flash addons which deters many designers from attemping it.

The transform property coupled with effects like the CSS3 transition property make basic animation much more accessible to designers. The likely result will be that over the next few years webpages will make the move from plain old static content to a much more exiting medium and it will be possible with pure HTML and CSS.

The transform property is made up of a number of predefined functions to make the transformation process simpler.

Translate Properties
Property Sytax Effect
Translate translate(X, Y) Shifts the element along the X and Y axis by the defined values of X and Y.
Translate X translateX(X) Shifts the element along the X axis by the defined value of X.
Translate Y translateY(Y) Shifts the element along the Y axis by the defined value of Y.
Scale scale(X, Y) Scales element up or down in the X and Y axis by the multiples X and Y.
Scale X scaleX(X) Scales element up or down in the X axis by the multiple X.
Scale Y scaleY(Y) Scales element up or down in the Y axis by the multiple Y.
Rotate rotate(deg) Rotates element around the central point in degrees as defined by deg.
Skew skew(Xdeg, Ydeg) Skews elements X and Y axis in degrees by the defined values of Xdeg and Ydeg.
Skew X skewX(Xdeg) Skews elements X axis in degrees by the defined value of Xdeg.
Skew Y skewY(Ydeg) Skews elements Y axis in degrees by the defined value of Ydeg.
Matrix matrix(a, b, c, d, e, f) Allows manual control over transformation, see bottom.

In terms of the full syntax, multiple functions can be included via one transformation property and would look like this.

CSS
div	{
	transform: 
		translate(80px, 40px) 
		scale(1.5, 1.5)
		skew(10deg, 10deg);
	}

Look at the examples below to see these properties in action. All the below effects are achieved using CSS only, if you are having trouble viewing the transformations it may be that your browser is not up to it. Try downloading Opera or google chrome, at the time of writing these browsers are the most compatable with this area of CSS.

Translate

Translate

transform: translate(80px, 40px);

Translate X

Translate X

transform: translateX(80px);

Translate Y

Translate Y

transform: translate(80px, 40px);

Scale

Scale

transform: scale(1.5, 1.5);

Scale X

Scale X

transform: scaleX(1.5, 1.5);

Scale Y

Scale Y

transform: scaleY(1.5, 1.5);

Rotate

Rotate

transform: rotate(45deg);

Skew

Skew

transform: skew(10deg, 10deg);

Skew X

Skew X

transform: skewX(45deg);

Skew Y

Skew Y

transform: skewY(45deg);

Matrix

Matrix

transform: matrix(1,1,0,2,40,20);

Okay, so you get the idea. There is alot of information here and to be honest the best way to get to grips with these properties is to try them out, so give it a go.

Negative Values

Negative values are allowed and have the effect of inverting the positive transformation. So where translateX(100px) will move the element 100 pixels to the right, translateX(-100px) will move the element 100 pixels to the left.

The exception to this is the scale properties, values above 1 enlarge the element, values between 0 and 1 reduce the element. Negative values effectivley flip the image and then scale it appropriately. For example scale(-1, -1) would create a mirror image of the original element.

webkit - moz - o

In terms of browser compatability, as always the different browsers currently use different sytax to call the transform property. By adding -webkit- -moz- and -o- you will cover all compatable browsers. An example for the transform property would be.

CSS
-moz-transform: translate(80px, 40px); 
-o-transform: translate(80px, 40px); 
-webkit-transform: translate(80px, 40px);
transform: translate(80px, 40px);

Matrix

The matrix function is the fundamental building block of the transform property. In fact, all the above predefined functions use the matrix, they have just been simplified to make them easier to use. The matrix function takes 6 parameters a, b, c, d, e, f, each of which related to a specific components of the transformation.

To explain the transform matrix fully is well beyond the scope of this article but as alway the W3 has an article explaining it fully. Unless you are already familiar with transformation matrices you will need some time to go through this article.

To find out how to really bring your pages to life you should check out the transition article which explains how you can actually time these transformations and effectively animate your web pages.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus