Practice learning CSS animation – Lesson 2: Transforms

Tram Ho

In the previous article, I learned about the most common and important attribute when doing CSS animation, this time I will introduce the property that is also extremely used, which is Transforms .

Introducing Transforms

Used for what?

In the previous lesson, we learned that Transition helps us control the CSS properties that affect objects to be “smooth” for a period of time. Transforms do not help control the properties that affect the object but will control that object directly, such as div , image , … The transforms attribute is the attribute used to define two-way conversions. , 3-dimensional, can be transformed, changed the scale, the shape, moved, … In other words, we will learn how to change the shape size and position of objects with Transforms.

Types of transforms:

Because two-dimensional and three-dimensional transformations can be defined, of course, there are two types of transforms: 2D transforms and 3D transforms.

2D Transforms

The function

There are 4 functions of transforms that will serve us to define the display for our object:

  • Scale: Allow to resize the object
  • Translate: Controls the change of position of the object
  • Rotate: Rotate the object at an arbitrary angle
  • Skew: stretch the object along the x or y axis

    Transform origin accepts key words: top, bottom, left, right. With the top parameter, the transform origin or I call here the center of rotation for easy visualization, the center of rotation will be at the center of the edge of the image. Similarly, if only one keyword is included, this ‘turning point’ will be at the middle of the edge.

    You can combine 2 keywords to select the rotation point in the angle as in the above example.

    In addition, transform-origin can also take parameters like%. As mentioned above, the origin O will be the top left point of the object. So the first percentage parameter will be on the X axis, if the X axis parameter is 100% corresponding to the top right point of the object, the same with the Y axis. as a percentage of the 2 coordinates. For example, 50% on the X-axis combined with 50% on the Y-axis will get the center point of the object:

    transform-origin: 50% 50%

    To be able to understand more, just try to practice offline.

    3D transform

    Now comes 3D transform. 3D transform is actually similar to 2D transform, but it adds 1 Z axis with the screen perpendicular to our eyes.

    To be able to create 3D environments, the first need is a perspective attribute.

    Perspective & translateZ

    What is perspective ? Perspective can be interpreted as the distance between our eyes and the object display – or the distance from the viewer’s eyes to the screen. Perspective gets unit value in pixels.

    Whenever you want to manipulate the 3D environment, the first thing is to remember to define perspective . Perspective will be defined in the parent element containing the object that needs transforming 3D. To make it easier to visualize perspective , see the example below



    Now when you hover over the image you feel like it’s scaling up, right? But the reality is that it is not an installed effect. In fact, the effect will be that the image is brought close to our eyes (moving along the Z axis on the screen coordinate system), so we feel the image is larger, even though the width and height of the image is not has changed. So what does perspective do here? Try changing perspective at body from 1000px to 300px (equal to translateZ) to see it. You will see the picture becomes “super huge”, it feels like close to our eyes. This is because we defined the distance to the screen as the translate Z distance. From this example, everyone understands the perspective that is the basis for the magnitude of the image when translateZ. That is why perspective must always be defined before manipulating 3D.

    By default, the perspective of the perspective – or more easily understood, the convergence point of 3D space will be the central point of the perspective block. However, you can change this convergence point using perspective-origin :

    Here is an example I found: See on code pen

    Rotate in 3D

    There is one more operation in 3D environment besides translate, which is rotate. Above we know about normal rotation, but actually there are 3 separate types of rotation: rotateX, rotateY, rotateZ

    Now still on the image above, do not translate anymore, change to rotateZ try it out:

    You will see the image of the rotating Z axis as the center, it looks like normal rotation. Now try changing rotateZ to rotateX. When choosing rotateX, the axis of the image will be Ox, or a horizontal line, try hover will see ? . For example, when rotatingX (90deg), you will see the image rotates and then disappears, because it is perpendicular to the screen, but it has no thickness, so it looks like it is disappearing. The same for rotateY() would be the Oy axis as the rotation axis.

    3D world

    There are many interesting things about 3D transform and how to apply it, but I have not studied and “absorbed” it all to write explanations for everyone, such as the title “learning to learn”, hope to take advantage of it later. Doing “super” things will write advanced articles for everyone ?


    This article has instructed you to learn about transforms, but the path to making good animations still needs a lot of combination. In the next article, I will have some guidelines for people to gradually get acquainted and have more ideas for their animation ?

Share the news now

Source : Viblo