3D Transformations. Fundamentals — CSS: Transform (Transform objects)

Today, there are many ways to create three dimensions on the page, but CSS allows you to do it natively, i.e., without using third-party plug-ins. In the remaining lessons in this course, we'll look at everything related to transformations in three-dimensional space. From creating elements to distorting them.

How is a 2D object different from a 3D object? Scientifically speaking, there's a new axis of coordinates. In the previous lessons, we did transformations on only two axes: x and y. In 3D space, an additional z-axis appears, which allows us to add depth to an object.

In the second part of the course, we'll learn how to work with the z-axis, and we'll introduce the concept of perspective, i.e., the distance between the screen and the location of the element “behind the screen” along the z-axis. Perspective is what the brain relies on to see whether an object is three dimensions.

Perspective

Perspective is specified at the parent object, inside which there will be elements with transformations. Note the following example. It has the same object styles and the same animation with one difference, one of the scenes has a perspective of 800 pixels. In this example, notice how the elements rotate on the x-axis. In the scene with perspective, there's depth, and the element doesn't just visually change its size, you can see exactly how it turns, unlike the adjacent scene. In the two-dimensional scene, this rotation is achieved by compressing and uncompressing the element, rather than rotating it directly, since there is no additional z-axis.

.scene-perspective {
  perspective: 800px;
}

You can control the perspective in CSS using the perspective property. It can take any value that can be used to define size: px, em, rem and so on. The property shows what position along the z-axis the element is located at.

Note: that the greater the value, the farther the element will be from the viewer. This means that its transformations will be less noticeable than those of an object that's closer. But there's also a problem here, a low perspective value can deform an element in a different way than we expect it to.

.scene-perspective-200 {
  perspective: 200px;
}

.scene-perspective-800 {
  perspective: 800px;
}

.scene-perspective-5000 {
  perspective: 5000px;
}

In this example, we can see that the smaller the perspective, the closer to us the rotation occurs. At 200 pixels, it feels like the block is rotated right in front of our eyes, which means the object is distorted. With a perspective of 5000 pixels, the effect isn't as noticeable because the object is very far away from us. If you increase the value to 20000 pixels, the rotation will be similar to what happens in two-dimensional space.

Viewpoint

We're not talking about opinions here, but rather about our actual viewpoint on an object, i.e., what position we are in: left, right, above, below, slightly to the side, and so on. Changing the point of view greatly affects how the object will be transformed. To see for yourself, you can take any object in your hand and start rotating it. Gradually change the position of your head or the object and notice how you see the same rotation from a different angle.

The perspective-origin property is used to define the viewpoint. Its value is similar to the transform-origin property, only now it's not the point of transformation that is defined, but the point from which we observe the transformation. By default, this viewpoint is the center of the object, which is written as follows:

.object {
  perspective-origin: 50% 50%;
}

In the example above, only one of the three values is used for each block. Notice how the perception changes from the rotation of the object at different points of view.

.scene-perspective {
  perspective: 800px;
}

.perspective-left {
  perspective-origin: left;
}

.perspective-center {
  perspective-origin: center;
}

.perspective-right {
  perspective-origin: right;
}

Note: that the perspective-origin property is used for the container inside which the transformed elements are located. If you need different viewpoints for different elements, then use multiple containers. In the examples above, the perspective and perspective-origin properties won't work if you specify values in the .box

Do it yourself

• Copy all examples from the current lesson and change the values of the perspective and perspective-origin properties
• Reproduce examples in the real world. Using improvised objects rotate them and change the distance to the object and the point of view

---

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“