Register to get access to free programming courses with interactive exercises

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.

Coordinates x, y, z

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;
}

Perspective in CSS

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.

Point of view when using perspective in CSS

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

Hexlet Experts

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

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.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.