Positioning of the Transform-origin

Transform-origin accepts two parameters, which can be a specific value, such as a percentage, em,px, or a descriptive parameter such as Left,center,right, or Top,center,bottom, and the first parameter represents the x direction, The second parameter represents the y direction, but when Left,right,center is used, it is not distinguished ! That means left center and center left are one thing. See the following table for details:

-Top Left | Left top equivalent to 0 0;-top | Top Center | Center top equivalent to 50% 0-right top | Top right is equivalent to 100% 0-left | Left Center | Center left equivalent to 0 50%-center | Center Center is equivalent to 50% 50% (default)-right | Right Center | Center right is equivalent to 100% 50%-bottom Left | Left bottom equivalent to 0 100%-bottom | Bottom Center | Center bottom equivalent to 50% 100%-bottom Right | Right bottom equivalent to 100% 100% pits Ah, the first time today with CSS3 do 3D cubes, rotation is always wrong, and then saw a codepen on an example, studied a bit, always do not understand transform-origin this point, Later, after careful study of the next found not to consider the order ... "upper left corner" can also say "upper left Corner", "Southeast corner" can also say "South East corner". It sounds awkward, but it means the same thing. Codepen's link is here: The HTTP://CODEPEN.IO/MIRCEAGEORGESCU/PEN/ROBLC is a bit confusing in this case, the X Y Z coordinate system. Previously thought that the coordinate system is like the three-dimensional modeling software in the world coordinate system does not change with the object change, tossing a whole day cube or turn the wrong. After careful study, I found The coordinate system is relative to the element itself, which is rotated as the element rotates。 X points to the right, Y points below, and Z points to the front. The 3rd puzzling Place is transform, and the attribute in transform is There is a sequencingOf For example: Transform:rotatey (180deg) Translatez (100px), said, the first rotation along the Y axis 180 degrees, and then forward (that is, the front of the element) to move 100px; this sentence is the same as the following sentence: transform: Translatez ( -100px) Rotatey (180deg), which means moving the 100px to the back (the back of the element), then rotating 180 degrees. The effect of the two sentences is the same, but the order differs so that their values are different.

Positioning of the Transform-origin