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 positiongrad(gradians). The key feature of this unit is that the number of grads per quadrant is 100. So a full circle is 400 gradiansrad(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 radiusturn. 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-axisis set. They-axisvalue will be thecenter - Two values: we set a point on the
x-axisand they-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 toptransform-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
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
- Article “How to Learn and Cope with Negative Thoughts“
- Article “Learning Traps“
- Article “Complex and simple programming tasks“
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.
