Transform-originproperty by default, the origin of the transformation is at the center point of the element, or 50% of the x-axis and y-axis of the element.
When we do not use Transform-origin to change the position of the element origin, the rotation, shift, and scaling of the CSS deformation are distorted by the location of the element's own center (the deformation origin). However, many times it is necessary to deform the elements in different locations, we can use Transform-origin to change the origin of the element, so that the element origin is not in the center of the element to achieve the desired origin position.
If we set the element transform Origin (Transform-origin) to 0 (x) 0 (y), this time the transformation origin of the element is converted to the left corner of the element.The Transform-origin property value can be a specific value such as percent, EM, px, or a keyword such as top, right, bottom, left, and center.
The Transform-origin property in the deformation of a zero can be either a parameter value or two parameter value. If it is two parameter values, the first value sets the position of the horizontal x-axis, and the second value is the position used to set the vertical y-axis.
The Transform-origin property in the 3D transformation also includes the third value of the z axis. The values of each value are simply described as follows:
- X-offset: Used to set the offset of the x-axis of the transform-origin horizontal direction, you can use <length> and <percentage> values, as well as positive values (from the center point along the horizontal x-axis to the right offset), It can also be a negative value (the left offset from the center point along the horizontal x-axis).
- Offset-keyword: is a keyword in top, right, bottom, left, or center that can be used to set the offset of the transform-origin.
- Y-offset: Used to set the offset of the Transform-origin property in the vertical y-axis, you can use the <length> and <percentage> values, and can be positive values (offset from the center point along the y-axis vertically). It can also be a negative value (the offset from the center point along the vertical y-axis).
- X-offset-keyword: is a keyword in left, right, or center that can be used to set the offset of the Transform-origin property value at the horizontal x-axis.
- Y-offset-keyword: is a keyword in top, bottom, or center that can be used to set the offset of the Transform-origin property value in the vertical y-axis.
- Z-offset: Used to set the 3D deformation distance transform-origin away from the user's eye point of view, the default value z=0, its value can be <length>, but <percentage> here will not be valid.
It appears that the Transform-origin value is similar to the background-position value. In order to facilitate memory, you can compare the keywords and percent values to remember:
- top = Top Center = center top = 50% 0
- right = right Center = center right = 100% or (100% 50%)
- bottom = Bottom Center = Center bottom = 50% 100%
- left = Left Center = center left = 0 or (0 50%)
- Center = Center Center = 50% or (50% 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%
you can see the effect, a circle revolves around its center point .CSS section:
<style>#cl {width:200px; height:200px; Background: #f99; Margin:0Auto; Text-Align:center; Font: -100px/200px"typeland Kangxi Dictionary Trial Version"; Border-radius: -%; Animation:myfirst 2s infinite linear; Transform-origin:center -%; /*transform-origin:20% 50%; position of the base point of a definite element*/ /*-moz-transform:rotate (45DEG); -webkit-transform:rotate (45DEG); -o-transform:rotate (45DEG); -ms-transform:rotate (45DEG); Transform:rotate (45deg);*/} @keyframes Myfirst { from{Transform:rotate (0);} to {transform:rotate (360deg);} }</style>HTML section:
<div id="cl"> fu </div>
You can see a circle revolving around the center.
How to set the rotation center of rotate in CSS transform
