Bring your page to life with CSS transforms

  • Article

Cascading Style Sheets (CSS) transforms enable you to transform elements in two- and three-dimensional space. Using CSS transforms, you can change the position of an element within its parent, manipulate an element's rotation or scale, and apply skewing distortions. Adding the perspective property (or the perspective transform function) adds a third dimension to transforms.

Here we introduce the CSS transform coordinate system. We then demonstrate the transform functionality exposed by CSS, and wrap up by illustrating the effect of the perspective property.

Coordinate systems for CSS transforms

CSS transforms are defined along a set of axes that form a coordinate system. Two-dimensional transforms are defined along two axes, as shown here. Be aware that the y-axis extends downward, not upward as most two-dimensional Cartesian coordinate systems are rendered.

The x-axis of the coordinate system extends along the horizontal dimension of the parent node of the element we are transforming. The y-axis extends along the vertical dimension. The point of origin ("(0,0)" in the diagram) of this coordinate system is originally at the center of the element that we are transforming (unless changed by the transform-origin property, which is discussed later).

Three-dimensional transforms are defined along three axes, as shown here. (The gridlines are included to help visualize the image in 3-D.)

The z-axis of the coordinate system is perpendicular to both the x- and y-axes. The point of origin ("(0,0,0)" in the diagram) of this coordinate system is also at the center of the element that is transformed, unless it is changed by the transform-origin property.

Applying transforms

Applying transforms to an element is simple. First, add the transform property to a selector, and then append a list of transform functions. For instance, the following declaration applies a translation transform:

transform: translateX(400px);

The result of this transform is that the original element is translated (moved) 400 pixels to the right. If we apply this transform to a green square div element, we get the following result. For illustration purposes, the element as it appears before the transform is applied is shown in addition to the transformed element, and the original element is dimmed.

You can view a live version of this example. Be aware that, for maximum browser compatibility, you should include the appropriate browser-specific prefixes before the transform property for each of the browsers you intend to support. For instance, the following declarations ensure support in Windows Internet Explorer 9 ("-ms-"), Chrome and Safari ("-webkit-"), Firefox ("-moz-"), Opera ("-o-"), and browsers that don't require a prefix, such as Internet Explorer 10.

  -ms-transform: translateX(400px);
  -webkit-transform: translateX(400px);
  -moz-transform: translateX(400px);
  -o-transform: translateX(400px);
  transform: translateX(400px);

2-D transform functions

These transform functions are supported for use in 2-D Transforms, and can be used starting with Internet Explorer 9.

Function Description

matrix(a, b, c, d, e, f)

Specifies a 2-D transformation in the form of a transformation matrix of six values.

rotate(angle)

Specifies a 2-D rotation by the angle specified in the parameter about the origin of the element.

scale(sx,sy)

Specifies a 2-D scale operation by the [sx,sy] scaling vector that is described by the two parameters.

scaleX(sx)

Specifies a scale operation by using the [sx,1] scaling vector, where sx is given as the parameter.

scaleY(sy)

Specifies a scale operation by using the [1,sy] scaling vector, where sy is given as the parameter.

skew(angleX,angleY)

Specifies a skew transformation along the x- and y-axes. The first angle parameter specifies the skew on the x-axis. The second angle parameter specifies the skew on the y-axis.

skewX(angle)

Specifies a skew transformation along the x-axis by the given angle.

skewY(angle)

Specifies a skew transformation along the y-axis by the given angle.

translate(tx,ty)

Specifies a 2-D translation by the vector [tx,ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter.

translateX(tx)

Specifies a translation by the given amount in the x direction.

translateY(ty)

Specifies a translation by the given amount in the y direction.

 

For the translation functions, the arguments can be either supported CSS length types or a percentage. For the rotation and skewing functions, the arguments can be either supported CSS angle types or raw numbers (which are interpreted as rotations in degrees). Finally, the scaling functions accept number arguments, which represent scaling factors.

2-D transform examples

Let's now look at several applications of two-dimensional CSS transforms.

We'll start with a translation along the y-axis. Keep in mind that translation values are interpreted as offsets from the original position of the element in the page layout.

View a live demonstration of this example.

Now let's try some rotation, skewing, and scaling. This screen shot shows one square div, repeated, that has one transform applied to each repetition.

View a live demonstration of this example.

The matrix transform function is not shown here. It enables you to specify a custom 2-D transformation manually. It's a good idea to become familiar with transform coordinate systems and rendering before attempting to specify transforms manually.

Applying multiple transforms

You can apply multiple transforms by chaining them—adding multiple transform functions to a single transform property in the order you want them applied. Be aware that the order in which the transforms are appended affects the final result. Let's look at an example.

The following declarations may look similar, but they produce different results.

transform: rotate(45deg) translateX(200px);
transform: translateX(200px) rotate(45deg);

You can view both of these declarations applied to different div elements here. Following is a screen shot of this example. The position of the original element is noted by the gray box. The purple (top) box has had the translateX function applied, and then the rotate function. The pink (bottom) box rotates first, and then is translated.

Changing the transform origin

Consider the following transform:

transform: rotate(45deg);

View this example in your browser.

The transformed element rotates around its center. But what if we want the element to pivot around one of its corners instead. Or around an arbitrary point? This is where the transform-origin property comes in.

The transform-origin property enables you to specify the origin of transformations for an element. In the case of rotations, changing the value of transform origin will move the center of rotation. The initial value for the transform-origin property is "50% 50%", meaning that the origin is placed in the center of the element. This is the implied value if the transform-origin property isn't specified.

Let's look at some examples of applying this same rotate declaration to elements with the transform-origin property set to different values. This example page includes the same element, repeated, with the same transform applied, but with different transform origins. This example page is similar, except that a skew transform is applied.

Next, we will begin adding depth to our webpages by using CSS 3-D transforms.

3-D transform functions

With Internet Explorer 10, designers can break into the third dimension by using CSS 3-D Transforms. The transform functions listed here are supported for use in 3-D transforms, and can be used starting with Internet Explorer 10.

3-D transforms are applied in the same way as 2-D transforms (by adding a transform property to the element's style). To take advantage of the third dimension, the list of available transform functions is expanded to include these:

Function Description

rotate3d(x, y, z, angle)

Specifies a clockwise 3-D rotation.

rotateX(angle)

Specifies a clockwise rotation by the given angle about the x-axis.

rotateY(angle)

Specifies a clockwise rotation by the given angle about the y-axis.

rotateZ(angle)

Specifies a clockwise rotation by the given angle about the z-axis.

scale3d(sx,sy,sz)

Specifies a 3-D scale operation by the [sx,sy,sz] scaling vector described by the three parameters.

scaleZ(sz)

Specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.

translate3d(tx, tytz)

Specifies a 3-D translation by the vector [tx,ty,tz], where tx, ty, and tz are the first, second, and third translation-value parameters respectively.

translateZ(tz)

Specifies a translation by a given amount in the z-direction.

matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)

Specifies a 3-D transformation as a 4×4 homogeneous matrix of sixteen values in column-major order.

 

Let's look at some examples of 3-D transforms in action. This example page has a row of squares, each with a transform (or multiple transforms) applied to it.

You probably noticed that these transforms don't appear three-dimensional. You might expect that because such a transform is rotating the element along the x- or y-axis "into the screen," that the element should be looking progressively smaller. The translateZ(-50px) function doesn't change the visual appearance of the element at all! This is happening because by default, CSS transforms are calculated using orthographic projection, a method of representing something three-dimensional in two dimensions. A two-dimensional world map is an example of orthographic projection that you're probably familiar with. Using CSS transforms, you get objects that don't appear smaller as they move away from the viewer.

Thankfully, the CSS transforms specification provides a property that easily enables us to add perspective to your transforms.

Adding perspective to 3-D transforms

The perspective property adds the illusion of depth to CSS transforms.

Function Description

perspective

Specifies a length value that represents the perspective from which all child elements of the object are viewed.

 

Take a look at the following diagram:

Notice how child elements are flattened (or projected) on the parent element. The surface of the resulting projections (visible in orange on the diagram) is a factor of the distance of the elements from the image plane defined by the parent element (which is based on the combination of 3-D transforms that we set for them). Additionally, the distance of the parent element itself from the "viewer" (annotated as perspective depth in the previous diagram) is also taken into account. The perspective CSS property enables us to specify that distance.

As an example, let's look at the same transforms used in the previous example, but this time, with perspective projection applied.

In this example, we apply a perspective property, set to 200px, to the parent element of the example div elements. Notice that when you hover over the elements (or tap them), the visual result of the transforms is indeed three-dimensional. The translateZ transform works as expected (that is, the element is pushed "away" from the viewer and becomes smaller). Also notice that we can combine 3-D transforms in a similar way to 2-D transforms.

Another way to fine-tune 3-D transforms is by using the perspective-origin property. The perspective-origin property sets the position of the viewer in relation to the element that the perspective transformation is applied to. Put another way, it allows us to create off-axis projections.

This example page is identical to the previous one, except the perspective-origin property is set to "30% 50%".

The default value for perspective-origin is "50% 50%", which implies that the viewing position is parallel to the middle of the element. In the previous example, we have offset the viewing position to the left ("30% 50%"). In the next example, you can see the difference when we offset to the right instead by setting the perspective-origin property to "80% 50%".

Conclusion

So far we have demonstrated CSS transforms in 2-D and 3-D, as well as some of their accompanying properties (transform-origin, perspective, and perspective-origin).

Next, we introduce CSS transitions.

To learn more about CSS transforms, check out the following reference sources: