css3 attribute transform-origin property to explain

is transformed in the transform CSS3 properties are commonly translate (translation), Rotate (rotation), skew (inclination), Scale (zoom) method. The transform-origin not transform property values, which has a separate grammar, but it is worth noting that, with the transform transform-origin must be used, this can also see that from the name, is set to transform the various actions set a reference point. By default, the operation of the reference point of the element as the central element of the box . nine transform can set the value of the position, the horizontal direction left | center | right three values, there are three in the vertical direction, namely top | center | bottom, so that a total of nine.

grammar:

Default: 50% to 50%, the effect is equivalent to the center center
Application: all block elements and certain elements inline

Value:

<Percentage>: Percentage values specified coordinates. It can be negative.
<Length>: length value specified coordinate value. It can be negative.
left: specify the origin of the abscissa is left
center①: specify the origin of the abscissa center
right: specify the origin of the abscissa is right
top: Specifies the origin ordinate top
center②: Specifies the origin ordinate center
bottom: Specifies the origin ordinate bottom

Description:

Set or retrieve an object converted to a home.
This attribute provides two parameters.
If two, the first one for the abscissa, ordinate for the second.
If only one value for the abscissa; ordinate will default to 50%.
Script properties corresponding to transformOrigin.

compatibility:

transform property

By default, the origin at the center of the deformation element or elements of the X-axis and Y-axis of 50%, as shown below:

Case we do not use transform-origin change elements of the original position, CSS deformation of the rotation of the shift, zoom and other operations are carried out in order to deform the element itself at the center (deformation origin) position. But very often the need for elements in different positions deformation operations, we can use the transform-origin to the origin of the elements of the position change, the center position of the element is not the origin of the elements to achieve the desired position of origin.

Looks transform-origin and background-position value of similar value. Easy to remember, you can compare keywords and percentage values referred to:

top = top center = center top = 50% 0
right = right center = center right = 100%或(100% 50%)
bottom = bottom center = center bottom = 50% 100%
left = left center = center left = 0或(0 50%)
center = center center = 50% or (50% to 50%)
top left = left top = 0 0
right top = top right = 100% 0
bottom right = right bottom = 100% 100%
bottom left = left bottom = 0 100%

In order so that we can understand at a glance, the screenshot below to rotate rotate transform of (), for example, the value and transform-origin effect is not the same:
transform-origin value of center (or center center, or 50% or 50% 50%):