2D transformations and rotation — CSS: Transform (Transform objects)

• Rotation point
• Rotation on one axis
• Additional assignment
• Useful Links

Without exaggeration, rotating objects on a page is one of the key features in developing animations, among other things. While easy to understand, this effect contains a few tricks we should remember when developing templates.

We can achieve object rotation using the transform property's rotate() function.

Unlike the move function, we can do rotation using pixels, percentages, or other familiar units of measurement. We use special angle units to rotate objects, including:

• deg (degrees). It is a unit of measurement 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). It is a measurement in which one unit is equal to the angle of an arc whose length is the same as the circle's radius
• turn. The number of revolutions of a circle, where one unit equals one full circle

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.

Each unit has advantages that will help you use rotate() more expressively. For convenience, in this course, we'll only use degrees.

Note that we use positive values for clockwise rotation:

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

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

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

We will explain more details about rotateZ() and similar functions in the topics devoted to 3D transformations. The way 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. It's worth understanding exactly how the elements rotate and whether we can control the point around which the rotation happens.

Rotation point

If you try to rotate any HTML element on the page, you'll notice that the browser sets the element's center as the rotation point. It's around this point that all the rotation takes place. It keeps the object within its original position. Most likely, you can 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, you can see the axis of rotation looking at 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. We use the transform-origin property 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 the center
• Two values: we set a point on the x-axis and the y-axis

The values can be percentages or keywords top, right, bottom, left, and center. Add the upper-left corner as the rotation point for the square from the example above. We can do it 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 rather than being bound to a specific edge:

Note the last example. In it, the rotation point is moved outside of the object itself. It creates the effect that the element 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 one 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 is clearer what happens to a 2D object. It 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 object's depth. The Y-axis rotation works on the same principle, but visually the object will rotate around the vertical axis.

Two-dimensional objects have no depth. That's why the object visually seems to change shape rather than rotate. We use this principle to create small animations. For example, if you use :hover on a button, you can change its angle relative to the user. We can use a similar technique 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