3D transformations and functions — CSS: Transform (Transform objects)

• The transform-style property
• Translation
• Rotation
• Scaling

In lessons about transforming two-dimensional objects, we learned how to use several types of transformations:

• Translation, which involved the translate() function
• Rotation, which involved the rotate() function
• Scaling using scale()

Transformations of 3D objects are the same in terms of their functionality. We only use these three types with a specific syntax for them. To make it easier for the browser, 3d is added to the function name when transforming 3d objects. Thus, we get three functions for three-dimensional elements:

• translate3d() — translation
• rotate3d() — rotation
• scale3d() — scaling

The only transformation missing for the z-axis is skew().

The transform-style property

We need an actual 3D object to demonstrate all these transformations correctly, not just the z-axis. We will use a cube as an example. To create it, you need to use the transform-style property, which takes one of two values:

• The default value flat indicates that the element is on the same plane as its parent. It is how we see elements in most cases and how we saw them in the previous lessons
• The element preserve-3d behaves as if it were in its own three-dimensional space, not in the space of its parent. It means that the elements will be independent of each other. They can pass through each other

It may be a bit confusing at first, but it is easiest to look at both values in the context of the example:

In the left example, the green block is above the red block because the elements are in the same two-dimensional space and depend on each other. No matter how you transform the green block, it cannot interact with the red block because it is in front of it.

In the right example, the preserve-3d value for the red block creates its volume context. Child elements do not just exist side by side. They are in a single three-dimensional space that allows them to pass through each other and move relative to shared axes.

The easiest way to think of it is that flat creates a single two-dimensional space, while preserve-3d creates a three-dimensional space. It adds new possibilities for positioning elements with each other.

Note that the transform-style property is set once for the parent element. Since this property creates the spacing, setting it for the child elements makes no sense.

In the example above, the red element was such a block. It is also important to remember that we are talking about direct descendants. If we add a new object inside the green block, we define the space for it by the flat value.

It is time to explore how the transformations we already know work in three-dimensional space. Let us take the most primitive three-dimensional object, a cube. We made all of its faces translucent to see how they look in 3D.

Now we are looking at the very center point of its front face. It will be the starting position for the transformations we will be doing below. You can also change the starting point using the perspective-origin property. It will have a slight difference:

Translation

We use functions to translate three-dimensional objects:

• translateX()
• translateY()
• translateZ()

And their big brother is translate3d(x, y, z). It simply combines all three functions for easy writing. The following two entries are equivalent:

.block {
  transform: translateX(10px) translateY(10px) translateZ(10px);
  transform: translate3d(10px, 10px, 10px);
}

The translation along the x and y coordinates is obvious. And how does it move along the z-axis? When you change the z-axis position, the browser moves the item closer or further away from its original location. However, if the element moves further away, it gets smaller. If it moves closer, it gets bigger. We can see this effect in the cube. We place the front and back walls of the cube using translateZ().

In the example below, we slightly rotated the cube and removed all edges except the front and back:

The faces have the following properties:

.front {
  transform: translateZ(150px);
}

.back {
  transform: translateZ(-150px);
}

Let us consider how to achieve the cube effect. We moved the front face was moved 150 pixels along the z-axis to get closer to the user.

It had the side effect now: the face is 382×382 pixels instead of the 300×300 pixels specified. As you can understand, these transformations affect the size of elements, which we should consider when embedding transformed objects in ready-made page templates.

The rear side has undergone a similar transformation; we moved it 150 pixels back from its original location. It also changed the size of the square itself — now it is 250×250 pixels.

Note that transforming along the same axis and by the same number of pixels did not cause the elements to get bigger or smaller by the same number of pixels. Here there is a direct correlation between the property, the original dimensions, whether the value was positive or negative, and the value of the perspective. A more complete description, with all formulas and matrices, can be found in the official specification.

If you are not going to do your animations in CSS, you do not need to understand it completely. The main thing is to get the gist of how properties affect elements.

Rotation

The functions offered by the CSS specification replicate similar ones for translation/movement.

We rotate elements using the following functions:

• rotateX() — rotate along the x-axis
• rotateY() — rotate along the y-axis
• rotateZ() — rotate along the z-axis
• rotate3d(x, y, z) — rotate along the x, y and z axes

An easy way to see how elements rotate is to use the cube animation as an example. There is an example for every axis:

Notice how we initially lined up the elements. The example uses three cubes, one above the other, and we can see them as we would in real life:

• The bottom face of the top cube is visible to us because it is above our viewpoint
• The top face of the bottom cube is visible to us for the same reason

That is because we set the perspective in the example on a block, which is common to all these cubes.

In this case, the perspective is set to the <body> tag, so the objects are in the same area relative to each other but at different heights.

Scaling

Unsurprisingly, we use the functions to scale elements in 3D space the same way as in the previous examples:

• scaleX() — scaling along the x-axis
• scaleY() — scaling along the y-axis
• scaleZ() — scaling along the z-axis
• scale3d(x, y, z) — scaling along x, y and z axes

The range of values is the same as in two-dimensional space. If you use values from zero to one, you make the element smaller. The values higher than one make them bigger along one of the axes.

Negative values will flip the element:

Do it yourself

For all the examples in the lesson, use different property values:

• perspective
• perspective-origin

See how 3D objects react to changes in these properties along with transformations. Try some transformations. For example, rotate and move. You can use these properties not only for the entire cube but also for each face separately.

Recommended materials

1. CSS Transforms Module Level 2 Specification