CSS3 3D Transformation Functions

Share this article

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.

Frequently Asked Questions about CSS3 Transformations and 3D Functions

What are the basic 3D transformations in CSS3?

CSS3 introduces four basic 3D transformations: rotate3d, scale3d, translate3d, and matrix3d. The rotate3d function rotates an element around a fixed axis in 3D space. The scale3d function scales an element in 3D space. The translate3d function moves an element in 3D space. The matrix3d function combines all transformations into one. These functions allow for more complex and dynamic transformations, enhancing the visual appeal and interactivity of web pages.

How does the translate3d function work in CSS3?

The translate3d function moves an element in 3D space. It takes three parameters: the x, y, and z coordinates. The x and y coordinates define the horizontal and vertical movement, respectively, while the z coordinate defines the depth. This function allows for more dynamic and interactive transformations, enhancing the visual appeal of web pages.

What is the difference between 2D and 3D transformations in CSS3?

2D transformations only affect the x and y axes, meaning they can only move elements horizontally and vertically. On the other hand, 3D transformations also affect the z-axis, allowing elements to move in depth. This adds a new level of interactivity and dynamism to web pages, enhancing their visual appeal.

How can I combine multiple 3D transformations in CSS3?

You can combine multiple 3D transformations using the matrix3d function. This function takes 16 parameters, representing a 4×4 matrix that defines the combined transformations. By adjusting these parameters, you can create complex and dynamic transformations, enhancing the visual appeal and interactivity of your web pages.

What are the benefits of using 3D transformations in CSS3?

3D transformations enhance the visual appeal and interactivity of web pages. They allow for more dynamic and complex transformations, creating a more engaging user experience. Additionally, they can improve the performance of animations and transitions, as they are hardware-accelerated in most modern browsers.

How can I use 3D transformations to create animations in CSS3?

You can use 3D transformations in combination with the animation property to create animations. The animation property allows you to define the duration, timing function, and iteration count of the animation. By changing the transformation properties over time, you can create dynamic and interactive animations.

Can I use 3D transformations in all browsers?

Most modern browsers support 3D transformations. However, older browsers may not support them, or may require vendor prefixes. It’s always a good idea to check the compatibility of these features before using them in your projects.

What is the perspective property in CSS3 3D transformations?

The perspective property defines how far the object is away from the user. This property allows you to create a 3D effect by giving the illusion of depth. The lower the value, the more intense the 3D effect will be.

How can I control the backface visibility in CSS3 3D transformations?

The backface-visibility property controls whether the back face of an element is visible when not facing the viewer. This property can be set to either “visible” or “hidden”. When set to “hidden”, the back face of the element will not be visible.

What is the transform-style property in CSS3 3D transformations?

The transform-style property defines how nested elements are rendered in 3D space. It can be set to either “flat” or “preserve-3d”. When set to “preserve-3d”, nested elements will maintain their 3D position.

Craig BucklerCraig Buckler
View Author

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.

AdvancedCSSCSS3transformtransformations
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form