CSS3 3D Transformation Functions

Key Takeaways

• CSS3 introduces four basic 3D transformations: rotate3d, scale3d, translate3d, and matrix3d, allowing for more complex and dynamic transformations. The translate3d function moves an element in 3D space, scale3d scales an element in 3D space, rotate3d rotates an element around a fixed axis in 3D space, and matrix3d combines all transformations into one.
• Multiple 3D transformations can be combined using the matrix3d function. This function takes 16 parameters, representing a 4×4 matrix that defines the combined transformations. However, the author warns that this function is complex and not well-documented.
• Transformations can be disabled using the none function. Additionally, the transform-origin property can be used to change the center of rotation of an element.

In my previous article we created a three dimensional scene containing an outer #stage element with three boxes. The #stage was rotated and had perspective applied so we could appreciate the 3D effects: View the third 3D transformation demonstration page… In this article we look at the basic 3D functions you can apply to elements.

translateX, translateY, translateZ and translate3d

The 3D translate functions move an element relative to its current location. You can move it horizontally (translateX), vertically (translateY) and into or out off the screen (translateZ) using any CSS length units (px, em, %, etc), e.g.

#mybox1
{
	transform: translateX(-20px) translateY(4em) translateZ(10px);
}

Fortunately, there’s a translate3d shortcut function which can be passed the x, y and z offsets in order:

#mybox1
{
	transform: translate3d(-20px, 4em, 10px);
}

scaleX, scaleY, scaleZ and scale3d

Like we saw in 2D transformations, the scale functions affect the dimensions of the element and all its children. scaleX, scaleY and scaleZ can be passed a single scaling parameter, e.g.

#mybox2
{
	transform: scaleX(1.3) scaleY(-1) scaleZ(1);
}

This would make the element 130% wider and mirror itself in the y-axis. As discussed in the previous lesson, scaleZ will not extrude the element to make it thicker because it has zero depth. Confusingly, scaleZ acts as a multiplier for all subsequent translateZ functions. In essence, this transformation:

transform: translateZ(100px) scaleZ(2);

is identical to:

transform: translateZ(200px);

However, be wary of the processing order. The last transformation functions are processed first so:

transform: scaleZ(2) translateZ(100px);

is the same as translateZ(100px); the scaleZ is never applied. There is also a scale3d shortcut function to apply all three x, y and z scaling factors:

#mybox2
{
	transform: scale3d(1.3, -1, 1)
}

rotateX, rotateY, rotateZ and rotate3d

You can rotate along any axis using the appropriate rotateX, rotateY or rotateZ function with an angle specified in degrees (deg) or radians (rad), e.g.

#mybox3
{
	transform: rotateX(45deg) rotateY(10deg) rotateZ(-20deg);
}

Note that the rotate3d shortcut function doesn’t work as you expect. Rather than accepting three rotation parameters, you define a rotation vector; an angle around a line defined from 0,0,0 to another point in space, e.g.

transform: rotate3d(0, 1, 0, 90deg);

This rotates the element 90 degrees around the line joining 0,0,0 to 0,1,0 — or the y-axis. It’s therefore identical to:

transform: rotateY(90deg);

By default, an element is rotated around its center although you can change the behavior using the transform-origin property with keywords (left, right, top, bottom, center), percentages or length units, e.g.

transform-origin: right 80% -50px;

Multiple 3D Transformations

As we have already seen, multiple transformation functions can be passed to the transform property if they are separated by whitespace characters, e.g.

transform: translateZ(-600px) rotateX(45deg) rotateY(10deg) rotateZ(-20deg);

These are applied in reverse order. The examples above have all been applied in the demonstration: View the 3D transformation demonstration page… If you’re feeling particularly masochistic, try the matrix3d function which accepts no less than sixteen parameters to define a 4×4 matrix. I won’t even attempt to explain it and there’s very little documentation — this is the best resource I found.

Disabling Transformations

Finally, remember you can switch off all transformations applied to an element using the none function:

transform: none;

If your brain is aching, you’ll be pleased to hear there’s just one more 3D transformation property we need to cover in the final part of this series.

Frequently Asked Questions about CSS3 Transformations and 3D Functions