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()
— translationrotate3d()
— rotationscale3d()
— 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 thex-axis
rotateY()
— rotate along they-axis
rotateZ()
— rotate along thez-axis
rotate3d(x, y, z)
— rotate along thex
,y
andz
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 thex-axis
scaleY()
— scaling along they-axis
scaleZ()
— scaling along thez-axis
scale3d(x, y, z)
— scaling alongx
,y
andz
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
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
- Article “How to Learn and Cope with Negative Thoughts“
- Article “Learning Traps“
- Article “Complex and simple programming tasks“
For full access to the course you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.