# CSS3 3D Transformation Functions

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.