在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

transform-origin CSS property sets the origin for an element's transformations.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The transformation origin is the point around which a transformation is applied. For example, the transformation origin of the rotate() function is the center of rotation.

This property is applied by first translating the element by the value of the property, then applying the element's transform, then translating by the negated property value.
This means, this definition

transform-origin: -100% 50%;
transform: rotate(45deg);
					

results in the same transformation as

transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
					

By default, the origin of a transform is center .

句法

/* 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;
					

transform-origin property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding initial values .

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> ， <percentage> , or one of the keywords left , center , right , top ，和 bottom .
• Two-value syntax:
  • One value must be a <length> ， <percentage> , or one of the keywords left , center ，和 right .
  • The other value must be a <length> ， <percentage> , or one of the keywords top , center ，和 bottom .
• 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.

值

x-offset

是 <length> 或 <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 ，或 center keyword describing the corresponding offset.

y-offset

是 <length> 或 <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 ，或 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 ，或 center keyword describing how far from the top edge of the box the origin of the transform is set.

z-offset

是 <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:

形式定义

形式句法

[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?
where 
<length-percentage> = <length> | <percentage>
					

范例

A demonstration of various transform values

<div class="box1"> </div>
									

.box1 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: none;
-webkit-transform: none;
}
									

<div class="box2"> </div>
									

.box2 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
									

<div class="box3"> </div>
									

.box3 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
									

<div class="box4"> </div>
									

.box4 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
									

<div class="box5"> </div>
									

.box5 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: -1em -3em;
-webkit-transform-origin: -1em -3em;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
									

<div class="box6"> </div>
									

.box6 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.7);
-webkit-transform: scale(1.7);
}
									

<div class="box7"> </div>
									

.box7 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.7);
-webkit-transform: scale(1.7);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
									

<div class="box8"> </div>
									

.box8 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.7);
-webkit-transform: scale(1.7);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
}
									

<div class="box9"> </div>
									

.box9 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewX(50deg);
-webkit-transform: skewX(50deg);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
}
									

<div class="box10"> </div>
									

.box10 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewY(50deg);
-webkit-transform: skewY(50deg);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
}
									

规范

浏览器兼容性

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• Using CSS transforms
• https://css-tricks.com/almanac/properties/t/transform-origin/

• 最后修改： Oct 15, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Transforms
4. 指南

   1. Using CSS transforms
5. 特性

   1. <transform-function>
   2. backface-visibility
   3. perspective
   4. perspective-origin
   5. rotate
   6. scale
   7. transform
   8. transform-box
   9. transform-origin
   10. transform-style
   11. translate