transform-origin
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
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.
-
One-value syntax:
- The value must be a
<length>
, a<percentage>
, or one of the keywordsleft
,center
,right
,top
orbottom
.
- The value must be a
-
Two-value syntax:
- One value must be a
<length>
, a<percentage>
, or one of the keywordsleft
,center
, andright
. - The other value must be a
<length>
, a<percentage>
, or one of the keywordstop
,center
, andbottom
.
- One value must be a
-
Three-value syntax:
- The first two values are the same as for the two-value syntax.
- The third value must be a
<length>
. It always represents the Z offset.
Values
- x-offset
-
Is a
<length>
or a<percentage>
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
, orcenter
keyword describing the corresponding offset. - y-offset
-
Is a
<length>
or a<percentage>
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
, orcenter
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
, orcenter
keyword describing how far from the top edge of the box the origin of the transform is set. - z-offset
-
Is a
<length>
(and never a<percentage>
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>
values:
Keyword | Value |
---|---|
left |
0% |
center |
50% |
right |
100% |
top |
0% |
bottom |
100% |
Formal syntax
transform-origin =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? |
[ [ center | left | right ] && [ center | top | bottom ] ] <length>?
<length-percentage> =
<length> |
<percentage>
Examples
Specifications
Specification |
---|
CSS Transforms Module Level 1 # transform-origin-property |
預設值 | 50% 50% 0 |
---|---|
Applies to | transformable elements |
繼承與否 | no |
Percentages | refer to the size of bounding box |
Computed value | for length the absolute value, otherwise a percentage |
Animation type | simple list of length, percentage, or calc |
Browser compatibility
BCD tables only load in the browser