CSS3 3D Transformation Functions
Share:
Free JavaScript Book!
Write powerful, clean and maintainable JavaScript.RRP $11.95
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.
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 created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
New books out now!
Get practical advice to start your career in programming!
Master complex transitions, transformations and animations in CSS!
Latest Remote Jobs




