CSS3 Transformations

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.

Tags: CSS3, transform, transformations
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • Anonymous

    Do you have any real life examples on when is best to use the 3D transformations?

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.