Design Lunatic

CSS3 Transforms

I’m sure many of you have heard of CSS3, the newest version of CSS that is still being actively developed. One of the most exciting parts of CSS3 is the new transforms module, which allows developers to animate and manipulate elements on the page without resorting to the use of javascript. These also don’t break the layout the way changing the margins or size would. The element remains in the same spot – it just looks different. In other words, you can use all of these without worrying about the impact they will have on the rest of the page.

Today, I’ll go over the 4 main different types of transforms:

• Scale
• Rotate
• Translate
• Skew

Scale

This CSS3 value for the “transform” property allows you to change an element’s size without changing the “width” or the “height” properties.

Use it like so:

-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);

The value inside the parenthesies is how much the element will be scaled. Also, notice the vendor prefixes. These are enough to cover any modern browser, so feel free to copy-paste this code.

There are also “scaleX” and “scaleY” values. As you might imagine, the “scaleX” property allows you to stretch the element horizontally, and the “scaleY” property can stretch the element vertically.

-moz-transform: scaleX(1.5);
-webkit-transform: scaleX(1.5);
-o-transform: scaleX(1.5);
-ms-transform: scaleX(1.5);
transform: scaleX(1.5);

Rotate

The rotate value allows you to rotate the element(surprisingly). Use it like so:

-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);

This code will rotate an element 180 degrees. Of course, you can change the value to be whatever you want.

Translate

The translate property allows you to move an element along the X or Y axis. Much like the “scale” property, there are 3 different ways this can be used:

• translate(X value, Y value)
• translateX(X value)
• translateY(Y value)

Here’s an example of using the “translate” value:

-moz-transform: translate(50px, 50px);
-webkit-transform: translate(50px, 50px);
-o-transform: translate(50px, 50px);
-ms-transform: translate(50px, 50px);
transform: translate(50px, 50px);

This code will move the element 50px to the right and 50px down. With the translate property, the Y value actually moves the element down. So, if you say: “translateY(50px)”, the element will move down 50px rather than up.

Skew

The skew value allows you to turn the element in a given angle. This one is pretty hard to explain, but after you try it yourself, you’ll understand.

-moz-transform: skew(20deg, 20deg);
-webkit-transform: skew(20deg, 20deg);
-o-transform: skew(20deg, 20deg);
-ms-transform: skew(20deg, 20deg);
transform: skew(20deg, 20deg);

Like the others, there are 2 other ways to do this: “skewX” and “skewY”. For example, “transform: skewX(30deg)”.

That concludes this post; if you have any questions or comments, feel free to comment!