Manuales 
transform-origin 4d1y2g
The transform-origin property is used to change the position of the origin of transformation of an element. o23
For example, rotating an element about the transform origin will result in different rotation results depending on the position of the origin.
The following image shows the result of applying the transform property.
transform: rotate(45deg) with different transform-origin values.
The default value of the transform origin is at 50% 50%, which is exactly the center of any given element.
The transform-origin can be specified using offset keywords, length values, or percentage values. It takes either two space-separated values (lentg, percentage, or keywords) for two-dimensional transforms, or three space-separated values for three-dimensional transforms. See the Values section below for details and possible combinations.
Official Syntax 2f2j3w
- Syntax:
transform-origin: [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] <length>? | [ center | [ left | right ] ] && [ center | [ top | bottom ] ] <length>? - Initial: 50% 50%
- Applies To: transformable elements
- Animatable: yes, as simple list of length, percentage, or calc
Values 445h6m
- <percentage>
-
A
<percentage>entry for a list of possible values. - <length>
-
A
<length>entry for a list of possible values and units. - top
- Computes to ‘0%’ for the vertical position.
- right
- Computes to ‘100%’ for the horizontal position.
- bottom
- Computes to ‘100%’ for the vertical position.
- left
- Computes to ‘0%’ for the horizontal position.
- center
- Computes to ‘50%’ (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or ‘50%’ (top 50%) for the vertical position if it is.
Notes 6p2z1x
If two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset). A third value always represents the Z position (or offset) and must be of type <length>.
If all three values are provided, the first value represents the horizontal offset, the second value represents the vertical offset, and the third value (if present) represents the position on the z-axis.
If only one value is specified, the second value is assumed to be center. If one or two values are specified, the third value is assumed to be 0px (for 3D transforms).
Examples 5w70f
The following are all valid transform-origin declarations:
transform-origin: top center;
transform-origin: 100% 30px;
transform-origin: 30px 60px;
transform-origin: center;
transform-origin: left;
transform-origin: 30% 50% 0px;
transform-origin: bottom right;
Live Demo 603y6q
The following demo shows the result of rotating an element using different transform-origin values. Try changing the values of the transform origin to see the rotation result change.
Browser 51c73
The transform-origin property is ed in Chrome (prefixed -webkit-), Firefox, Safari (-wekit-), Opera 10.5+ prefixed with -o- and unprefixed starting version 12.10, Internet Explorer 9 prefixed with -ms- and unprefixed starting from version 10, and on Android and iOS.
The three-value syntax is not ed in Opera and Internet Explorer prior to version 10.