Blogs

CSS3 3D Transformation Functions

Craig Buckler
Share

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…

CSS3 3D

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…

CSS3 3D

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.