Transform-origin (deformation origin)

Change Elemental base point Transform-origin

• Transform-origin is the origin of the deformation, that is, the element around the point of deformation or rotation, the property only when the Transform property is set to play a role;
• Because the default base point of our element is its central location , in other words, we do not use Transform-origin to change the position of the element base point, transform the Rotate,translate,scale,skew, The matrix and other operations are changed in the central position of the element itself .
• But sometimes we need to perform these operations on elements in different locations, so we can use Transform-origin to change the base point position of the element so that the element base point is not in the central position to reach the base point you need.
• Let's look at its usage rules:

  Transform-origin (x, y): the base point (reference point) used to set the motion of the element. The default point is the center point of the element. where x and Y values can be a percent, em,px, where X can also be a character parameter value left,center,right;Y and X can also set a character value in addition to a percent score top,center , Bottom .

  • Syntax:-moz-transform-origin: [| | Left | Center |  Right [| | Top | Center | Bottom]?
  • Transform-origin accepts two parameters, they can be percentages, em,px and other specific values, or it can be left,center,right, or top,center,bottom and other descriptive parameters;
  • Top Left | Left top is 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 value)
  • 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%

Where left,center right is the horizontal direction value, corresponding to the score of left=0%;center=50%;right=100%

and the top center bottom is the vertical direction of the value, wherein the top=0%;center=50%;bottom=100%;

If only one value is taken, the vertical direction value is not changed .

Note: Transform-origin is not a property value in transform, he has his own syntax. But he has to combine transform to work.

Transform-origin (deformation origin)