# 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.