Register to get access to free programming courses with interactive exercises

3D transformations. Functions CSS: Transform (Transform objects)

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, but there is a special syntax for them. To make it easier for the browser, 3d is added to the function name when transforming 3d objects. Thus, we get 3 functions for three-dimensional elements:

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

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

transform-style

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

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

This 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, this is 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's in front of it.

In the right example, the preserve-3d value for the red block creates its own volume context. Child elements don't just exist next to each other, they're in a single three-dimensional space, which allows elements to pass through each other and move relative to common 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. This adds new possibilities for positioning elements with each other.


Note: that the transform-style property is set just once for the parent element. Since this property is responsible for creating the space, it makes no sense to set the property for the descendants. In the example above, the red element was such a block. It's also important to remember that we're talking about direct descendants. If you add a new element inside the green block, the space for it will be defined by the flat value


Now it's time to find out how the transformations we already know work in three-dimensional space. As an example, let's take the most primitive three-dimensional object, a cube. All of its faces have been made translucent to make it easier to see how it looks in space. Now we're looking at the very center point of its front face. This will be the starting position for the transformations we'll be doing below. You can also change the starting point using the perspective-origin property. This will have a slightly dif

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 fairly 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, and if it moves closer, it gets bigger. This effect can be seen on the cube itself. The front and back walls of the cube are placed using translateZ(). In the example below, all edges except the front and back were removed, and the cube was slightly rotated.

The faces have the following properties:

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

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

To achieve the cube effect, the front face was moved 150 pixels along the z-axis to get closer to the user. This had the side effect that the face is now 382×382 pixels instead of the 300×300 pixels specified. As you can understand, these transformations affect the size of elements, which is important to consider when embedding transformed objects in ready-made page templates.

The rear side has undergone a similar transformation; it's been moved 150 pixels back from its original location. It also changed the original size of the square itself. It's now 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's 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're not going to make your cartoons in CSS, then you don't need to fully understand it. The main thing is to get the gist of how the properties affect elements.


Rotation

The functions provided by the CSS specification replicate functions that are similar for translation/movement. Rotating elements is done 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

The easiest way to see how elements rotate is to use the cube animation as an example. There's a separate example for each axis


Pay attention: to how the elements are initially lined up. The example uses three cubes located under one another, and we can see them as we would in real life: the top cube's bottom face is visible to us because it's above our viewpoint, and the bottom cube's top face is visible to us for the same reason. This is because the perspective in the example is set to a block that's common to all of these cubes. In this case the perspective is set to the <body> tag, so the objects are located in the same area relative to each other, but at different heights


Scaling

Unsurprisingly, the functions used to scale elements in 3D space are designed in 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) — scaleing along x, y and z axes

The range of values is the same as in two-dimensional space: if you use values from 0 to 1, it makes the element smaller, and values higher than 1 make the element bigger along one of the axes. Negative values will flip the element.


Recommended materials

  1. CSS Transforms Module Level 2 Specification

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

From a novice to a developer. Get a job or your money back!

Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

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.