CSS3 essay series transform (1)-- transform-origin_html/css_WEB-ITnose

The transform-origin attribute seems to be rarely used. It determines the origin that the transformation depends on. For basic attribute characteristics, please refer to the CSS manual.

If rotation is used in an H5 animation project, it cannot be underestimated.

If we make a swing effect

In fact, we should pay attention when cutting the picture, but at first glance, many people may mistakenly think that it is right. The entire area layer is rotated, which may be written as transform-origin:center top;

In fact, the correct rotation point is the top point of the line.

Then if the picture is cut like this, the rotated position is the abscissa pixel of the current position/width of the cut element 27 / 190 =14%, then It should be written as transform-origin:14% top;

Of course, if we take this picture as an example, when we cut the picture, we can cut it like this

In this case, the origin can be written directly as transform-origin:0 0;

It is worth noting that it must be defined, because the default is The center of the element (center center or 50% 50% rotation).

Because there were many H5 scene show projects some time ago, I am going to compile some stuff about transform and animate to share, which can be regarded as a review of my own.

I haven’t blogged for many years, hoping I won’t be a eunuch again...