CSS3 2D Transformation Functions

Craig Buckler
Craig Buckler
Share

In my previous article we discovered that transformations are applied using the transform property (with a -webkit prefix for Chrome, Safari and Opera 15):

-webkit-transform: function(values);
transform: function(values);
In this article we’ll discuss all 2D functions.

translate, translateX and translateY

The translate function moves an element relative to its current location. It accepts an x and y value which can be any typical CSS length (px, em, %, etc):
transform: translate(-200%, 100px);
View the translate transformation demonstration page…
In this example, the element is moved 200% to the left and 100px down. The percentage is based on the original size of the box so 200% represents twice its width. If you only wanted to move in a single direction, you can use translateX or translateY accordingly. Now you’re probably thinking this property is pointless — after all, we could move elements in CSS2.1 using margins or absolute positioning values. However, it can come in useful. For example, assume you had an element centered using margin: 0 auto;. Moving that element 20px to the left would be tricky unless you knew the exact dimensions of the container — but translate makes it easy.

scale, scaleX and scaleY

scale affects the dimensions of the element and all its children. It can be passed a single parameter which represents the scaling in both directions, e.g. make the element twice as large:
transform: scale(2);
Or we can pass two parameters which scale the element horizontally and vertically, e.g. make the element half the width but twice the height:
transform: scale(0.5, 2);
Alternatively, you can use scaleX or scaleY
to target one dimension. What’s less well known is that either dimension can accept a negative value which creates a mirror image of the element. For example, a horizontal reflection which is 150% taller:
transform: scale(-1, 1.5);
View the scale transformation demonstration page…

rotate

As you’d expect, rotate rotates an element using an angle specified in degrees (deg) or radians (rad), e.g.
transform: rotate(30deg);
View the rotate transformation demonstration page… A positive value rotates clockwise while a negative value rotates counter-clockwise. The item rotates around its center although you can change the behavior using the transform-origin property (and -webkit-transform-origin) with keywords (left, right, top, bottom, center), percentages or length units, e.g.
/* rotate around top-left of element */
transform-origin: left top;

skewX and skewY

skewX and skewY can be used to skew against the horizontal and vertical axis accordingly by passing an angle in degrees (deg) or radians (rad). (Note the single skew function which accepted both parameters has been dropped from the specification and shouldn’t be used).
transform: skewX(-10deg);
View the skewX transformation demonstration page…

Multiple Transformations

Multiple transformation functions can be passed to the transform property if they are separated by whitespace characters, e.g.
transform: rotate(-20deg) skewX(-10deg) scale(0.8);
View the multiple transformations demonstration page… If you’re a hardcore mathematician, you can also apply transformations using the matrix function. This accepts six parameters; four for the transformation matrix followed by two for the dimension scaling, e.g.
transform: matrix(1.2,0.2,0.15,1,-50,10);
The matrix is applied to every point to determine the new shape and location. Unless you’re manipulating the values using JavaScript, I suggest using multiple values; they’re far easier to read.

Disabling Transformations

Finally, if you want to switch off all the transformations applied to an element, simply use a none function with no parameters:
transform: none;
Working with transformations in two dimensions is easy. In the next lesson, we’ll move into 3D…

Frequently Asked Questions about CSS3 2D Transformations

What are the basic 2D transformations in CSS3?

CSS3 introduces four basic 2D transformations: translate, rotate, scale, and skew. The translate function moves an element from its current position in the X and Y directions. The rotate function rotates an element clockwise or counterclockwise by a specified number of degrees. The scale function changes the size of an element. The skew function tilts an element to the left or right.

How do I use the rotate function in CSS3?

The rotate function in CSS3 is used to rotate an element around a fixed point. The fixed point is the center of rotation, which by default is the center of the element. The syntax for the rotate function is ‘transform: rotate(angle);’ where the angle is specified in degrees.

Can I combine multiple 2D transformations in CSS3?

Yes, you can combine multiple 2D transformations in CSS3. You can do this by listing the transformation functions in the value of the transform property. The transformations are applied in the order they are listed.

What is the difference between 2D and 3D transformations in CSS3?

2D transformations only affect the x and y-axes, while 3D transformations also affect the z-axis. This means that 3D transformations can change the depth and perspective of an element, in addition to its position and size.

How do I use the scale function in CSS3?

The scale function in CSS3 is used to change the size of an element. The syntax for the scale function is ‘transform: scale(sx, sy);’ where sx and sy are the scale factors for the x and y-axes, respectively.

What is the use of the transform-origin property in CSS3?

The transform-origin property in CSS3 is used to change the origin of transformation. By default, the origin of transformation is the center of the element. You can change this to any point within the element using the transform-origin property.

Can I animate 2D transformations in CSS3?

Yes, you can animate 2D transformations in CSS3 using the transition property. The transition property allows you to specify the duration, timing function, and delay of the transformation.

How do I use the skew function in CSS3?

The skew function in CSS3 is used to tilt an element to the left or right. The syntax for the skew function is ‘transform: skew(ax, ay);’ where ax and ay are the skew angles for the x and y-axes, respectively.

What is the matrix function in CSS3 2D transformations?

The matrix function in CSS3 2D transformations is a combination of translate, rotate, scale, and skew transformations. It takes six parameters, which are the elements of the transformation matrix.

Can I use CSS3 2D transformations on all HTML elements?

Yes, you can use CSS3 2D transformations on all HTML elements. However, the effect of the transformations may vary depending on the type of element. For example, inline elements are treated as block elements when transformed.