transform-origin

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

嘗試一下

變化原點指的是應用變化的點。舉例來說, rotate() (en-US)函數的原點為旋轉中心。 (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 屬性可以使用多次,每一次都代表著一個偏移量。若未設定偏移量,則重置為其對應的 初始值 (en-US)

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

Examples

Specifications

Specification
Unknown specification
# transform-origin-property
預設值 (en-US)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