directory

  • Understanding coordinate system
  • Composite transform

To understand skew, watch a demo. In the following demo, we have four squares, which are

Red: no skew, green: X direction change, blue: Y direction change, black: both directions change,

Drag the slider below to see the effect of changing the skew Angle. If you toggle selector you can set transform-origin, origin is 0% by default. You can play with it.

If you drag the slider to 90deg or -90 deg, then you should be able to answer the above question. If you see the entire page go white on Chrome, try it next door on Firefox, which is the best performer in this demo, and Safari the worst.

skew

Skew may be more intuitive in terms of left and right twists, but it’s not accurate. In the case of the green square, skew 20 degrees looks like a right skew when Origin is 0% 0%, but it looks like a left skew when Origin is 100% 100%.

So how do you understand skew transformation? It’s actually a matrix transformation. As for matrix transformation, Teacher Zhang Xinxu explained the corresponding relationship between skeW change and universal matrix transformation well in this article about portal:

In other words, the second and third parameters of the matrix function control the tangent of the graph, which is more general. The following figure shows the 6 parameters of the CSS matrix control which transformation respectively, we can look at:

Write the matrix function as follows:

Some students asked why there is no rotation parameter. Actually, rotation is a combination of scale and skew. However, in order to keep the rotation consistent with the original shape, the four parameters should have the following relationship:

In other words, rotation is a specific set of scale + SKEw combined operations.

Understanding coordinate system

Now that skew is a matrix transformation, let’s take a look at the coordinate system in the browser. Because all operations except transform are affected by the origin of coordinates. In the browser, downward is the positive Y direction and right is the positive X direction, but only the origin is uncertain, which is exactly what transform-Origin does. When you set this property to Top Left, it means that the origin of the matrix transformation coordinate system is located in the upper left corner to obtain the coordinates of the various points in the graph, which are rendered by the browser through the matrix operation. Setting it to 50% means that the origin is in the center of the graph.

Composite transform

Consider the following two lines of CSS:

The above transformation of the two squares will result in different results. The reason is that the above two operations are equivalent to two matrix multiplication operations on coordinates. Different from ordinary multiplication operations, matrix multiplication operations do not have the exchange rate of **, so the results will be different.

Refer to the article: www.cnblogs.com/TianFang/p/… Code-industry.net/masterpdfed… www.zhangxinxu.com/wordpress/2… Blog.csdn.net/u012964944/… www.jianshu.com/p/956d54376…