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.)
語法
css
/* 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.
- One-value syntax:
- The value must be a
<length>
(en-US), a<percentage>
(en-US), or one of the keywordsleft
,center
,right
,top
orbottom
.
- The value must be a
- Two-value syntax:
- One value must be a
<length>
(en-US), a<percentage>
(en-US), or one of the keywordsleft
,center
, andright
. - The other value must be a
<length>
(en-US), a<percentage>
(en-US), 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>
(en-US). It always represents the Z 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
, orcenter
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
, 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>
(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
transform-origin =
[ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US) <length> (en-US)? (en-US) | (en-US)
[ (en-US) [ (en-US) center | (en-US) left | (en-US) right ] (en-US) && (en-US) [ (en-US) center | (en-US) top | (en-US) bottom ] (en-US) ] (en-US) <length> (en-US)? (en-US)
<length-percentage> =
<length> (en-US) | (en-US)
<percentage> (en-US)
Examples
Specifications
Specification |
---|
CSS Transforms Module Level 1 # transform-origin-property |
預設值 (en-US) | 50% 50% 0 |
---|---|
Applies to | transformable elements |
繼承與否 | no |
Percentages | refer to the size of bounding box |
Computed value (en-US) | for length (en-US) the absolute value, otherwise a percentage |
Animation type | simple list of length, percentage, or calc |
Browser compatibility
BCD tables only load in the browser