The CSS Transform module for two-dimensional space provides several functions that allow you to transform elements by their coordinates:
translate()
— move an object by x and y coordinatesrotate()
— rotate an object relative to its upper-left cornerscale()
— scale an objectskew()
— skew an element In two-dimensional space, this function deforms the elementThis course will cover all of these transformations and how they work. Don't be intimidated by the math in these lessons; you don't need to be a geometry wizard to do simple transformations.
We were taught in school that in a typical rectangular coordinate system, positive values on the x-axis go from the center to the right, and positive values on the y-axis go from the center up.
In browsers, however, the y-axis is inverted, and its positive values go downward from the center. This is important to remember so you don't get confused when moving objects. You might have encountered this same feature when using the top
property in the course CSS: Positioning.
One important feature of the CSS Transform module is the reference point from which the transformation takes place. This point is the upper-left corner of the object. This behavior is very similar to relative positioning, allowing you to use the features of absolute and relative positioning for the same element.
Any HTML object on a page is a rectangle, regardless of its appearance. For the example, create a circle and add a border with the outline
, property to see the actual borders of the block. The point with coordinates (0, 0) are in the upper-left corner of the element.
To move the object along the x and y use the transform
property's translate()
function. This is an abbreviation of two functions:
translateX()
translateY()
Which allow you to move the object along the x and y-axes respectively. The syntax of the translate function may differ:
transform: translate(x, y)
transform: translateX(x) translateY(y)
As you can see, the transform
property can take on several functions simultaneously. This will come in handy when we learn about more of the available features.
Note: that translate()
is counted from the zero point of the object, not the page.
Note the way elements overlap when using the transform
property. An element with this property will be higher on the z-axis than the other elements, providing all other conditions are the same.
During the lesson, you may wonder why you should use the translate()
function when relative positioning and the top
, right
, bottom
, and left
properties have existed for a long time.
In terms of visual effect, both approaches will give the same result, but, as usual, the devil is in the details. Two devils in this case:
The advantages of using the transform
property in animation will be discussed in the corresponding course. In short, browsers process motion animations using translate()
faster than they do using positioning.
In this case, it's useful to know the difference regarding the use of percentage values as soon as we start looking at transformations. This is a point that's often forgotten and leads to extra time being wasted when developing pages. In the example below, there are two squares. They're initially centered in their columns, after which the following properties are applied:
translateX(50%)
left: 50%
with relative positioningAssuming everything else is equal, both squares will have shifted by a different number of pixels to the right from their original position. The feature consists of a frame of reference from which the relative sizes of these two properties are counted. For translateX()
, this frame is the object itself, and for a relatively positioned element, it's the container in which it's located. In this case:
These modifications can be applied when positioning elements within a page. One of the most common tasks is to center the modal window. The positioning course had a similar test. It's notoriously difficult to do accurate positioning using only absolute positioning. There are dozens of ways to do this, but using a combination of absolute positioning and translate()
is the best option.
Complete the test Html: Modal Box Positioning using absolute positioning and the translate()
function.
The Hexlet support team or other students will answer you.
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.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
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.