transform-origin

CSS 內的transform-origin屬性可以設定元素變化的原點。

變化原點指的是應用變化的點。舉例來說, rotate()函數的原點為旋轉中心。 (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

語法

/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;

/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;

The transform-origin p屬性可以使用多次,每一次都代表著一個偏移量。若未設定偏移量,則重置為其對應的 初始值

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 offset and the second represents the vertical offset.

Values

x-offset
Is a <length> (en-US) or a <percentage> (en-US) describing how far from the left edge of the box the origin of the transform is set.
offset-keyword
Is one of the left, right, top, bottom, or center keyword describing the corresponding offset.
y-offset
Is a <length> (en-US) or a <percentage> (en-US) describing how far from the top edge of the box the origin of the transform is set.
x-offset-keyword
Is one of the left, right, or center keyword describing how far from the left edge of the box the origin of the transform is set.
y-offset-keyword
Is one of the top, bottom, or center keyword describing how far from the top edge of the box the origin of the transform is set.
z-offset
Is a <length> (en-US) (and never a <percentage> (en-US) which would make the statement invalid) describing how far from the user eye the z=0 origin is set.

The keywords are convenience shorthands and match the following <percentage> (en-US) values:

Keyword Value
left 0%
center 50%
right 100%
top 0%
bottom 100%

Formal syntax

[ (en-US) <length-percentage> | (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom ] (en-US) | (en-US) [ (en-US) [ (en-US) <length-percentage> | (en-US) left | (en-US) center | (en-US) right ] (en-US) && (en-US) [ (en-US) <length-percentage> | (en-US) top | (en-US) center | (en-US) bottom ] (en-US) ] (en-US) <length> (en-US)? (en-US)

where
<length-percentage> = <length> (en-US) | (en-US) <percentage> (en-US)

Examples

Code Sample

transform: none;

transform: rotate(30deg);

transform: rotate(30deg);
transform-origin: 0 0;

transform: rotate(30deg);
transform-origin: 100% 100%;

transform: rotate(30deg);
transform-origin: -1em -3em;

transform: scale(1.7);

transform: scale(1.7);
transform-origin: 0 0;

transform: scale(1.7);
transform-origin: 100% -30%;

transform: skewX(50deg);
transform-origin: 100% -30%;

transform: skewY(50deg);
transform-origin: 100% -30%;

Specifications

Specification Status Comment
CSS Transforms Level 1
The definition of 'transform-origin' in that specification.
Working Draft  

預設值50% 50% 0
Applies totransformable elements
繼承與否no
Percentagesrefer to the size of bounding box
Computed value (en-US)for length (en-US) the absolute value, otherwise a percentage
Animation typesimple list of length, percentage, or calc

Browser compatibility

BCD tables only load in the browser

See also