2D transformations. Rotation — CSS: Transform (Transform objects)

Rotating objects on a page is, without exaggeration, one of the most useful features in developing animations, among other things. This effect, while easy to understand, contains a few tricks that should be borne in mind when developing templates.

Object rotation is achieved using the transform property's rotate() function. Unlike the move function, rotation cannot be done using pixels, percentages, or other familiar units of measurement. Special angle units are used to rotate objects, including:

• deg (degrees). This is a unit of measurement that's familiar to many people, you can use it to specify how much of an angle you should rotate an object relative to its initial position.
• grad (gradians). The key feature of this unit is that the number of grads per quadrant is 100. So a full circle is 400 gradians.
• rad (radians). This is a measurement in which one unit is equal to the angle of an arc whose length is the same as the radius of the circle.
• turn. The number of revolutions of a circle, where one unit is equal to one full revolution.

Don't be intimidated by these units if you aren't familiar with them. You don't need to use all of them for most actions, and each unit has its own advantages that will help you use rotate() more expressively. For convenience, in this course we'll only use degrees.

Note that: positive values are used for clockwise rotation

Take a look at the overlapping elements. After changing their position in space, they didn't occupy a special position in the document flow. From the flow's perspective, nothing happened to these elements. The place they were in before the transformation is still reserved and not occupied by other elements. This space is also unchanged regardless of the values of the transform property. This behavior ensures that browsers display the page correctly if they don't support the transform property.

As with translation, rotate() is not the only function for rotating an element. There are several others:

• rotateX()
• rotateY()
• rotateZ()

More details about rotateZ() and similar functions will be explained in the topics devoted to 3D transformations. The way the other two functions operate in a 2D area can be confusing at first. How do you rotate an object on only one axis? The answer to this question will come towards the end of the lesson. For now, it's worth understanding exactly how the elements rotate and whether it's possible to control the point around which the rotation takes place.

Rotation point

If you try to rotate any HTML element on the page, you'll notice that the browser sets the center of the element as the rotation point. It's around this point that all the rotation takes place. This keeps the object within its original position and is the most intuitive way to do it. Most likely, you'll be able to turn the object 90 degrees clockwise in your head and, even before doing the transformation, determine the final result of it.

In the following examples, the axis of rotation will be indicated by a dark square point. Watch how the element rotates, but don't be hypnotized :)

Using CSS, we can change the point around which the rotation will take place however we want. The transform-origin property is used for this; it can take one to three values at a time. The third value is responsible for the z-axis, which we'll look at when we do 3D transformations. The behavior when one or two values are specified is as follows:

• One value: a point on the x-axis is set. The y-axis value will be center.
• Two values: a point is set on the x-axis and on the y-axis.

The values can be percentages or special keywords top, right, bottom, left, center. Add the upper-left corner as the rotation point for the square from the example above. This can be done in two ways:

• transform-origin: left top
• transform-origin: 0% 0%

If you use percentage values, you can achieve interesting effects, as you can place the point anywhere on the object itself, rather than being bound to a specific edge of the object.

Note the last example. In it, the rotation point is moved outside of the object itself. This creates the effect that the object orbits around the rotation point, rather than just rotating on it. Try changing the values to make sure you understand rotation points.

Rotation on one axis

At the very beginning of the lesson, we said that there were two other functions for rotating 2D objects:

• rotateX()
• rotateY()

How can you rotate a two-dimensional object along on of the axis? Let's add a 360-degree rotation on the x-axis with a rotation point in the center

We'll give the object a gradient for clarity. When we study 3D objects, it will become clearer what happens to a 2D object. It really does only rotate on one axis. In this case, it leans forward and passes under the x-axis. It's like a swing that spins the "sun," only we don't see the depth of the object. Y-axis rotation works on the same principle, only visually the object will rotate around the vertical axis.

Two-dimensional objects have no depth, and that's why visually the object seems to change shape, rather than rotate. This principle can be used to create small animations. For example, if you use :hover on a button, you can change its angle relative to the user. A similar technique can be used to achieve a 3D effect in the 2D plane. There'll be more about animation in future courses, but this example is already good for creating simple animated interfaces.

Additional assignment

Using the last button example, try the transformation properties you learned to see how the object will behave when hovered over. You can change the transformation speed in the transition property.

Useful Links

• Degree unit
• Gradian unit
• Radian unit

---

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“