当前位置：文江博客知识库简体中文文档 Web CSS transform-origin

transform-origin - CSS（层叠样式表）编辑

transform-origin CSS属性让你更改一个元素变形的原点。

转换起点是应用转换的点。例如，rotate()函数的转换原点是旋转中心。（这个属性的应用原理是先用这个属性的赋值转换该元素，进行变形，然后再用这个属性的值把元素转换回去）

语法

/* 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属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。没有明确定义的偏移将重置为其对应的初始值。

如果定义了两个或更多值并且没有值的关键字，或者唯一使用的关键字是center，则第一个值表示水平偏移量，第二个值表示垂直偏移量。

一个值：
- 必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个。
两个值：
- 其中一个必须是<length>，<percentage>，或left, center, right关键字中的一个。
- 另一个必须是<length>，<percentage>，或top, center, bottom关键字中的一个。
三个值：
- 前两个值和只有两个值时的用法相同。
- 第三个值必须是<length>。它始终代表Z轴偏移量。

值

x-offset: 定义变形中心距离盒模型的左侧的<length>或<percentage>偏移值。
offset-keyword: left，right，top，bottom或center中之一，定义相对应的变形中心偏移。
y-offset: 定义变形中心距离盒模型的顶的<length>或<percentage>偏移值。
x-offset-keyword: left，right或center中之一，定义相对应的变形中心偏移。
y-offset-keyword: top，bottom或center中之一，定义相对应的变形中心偏移。
z-offset: 定义变形中心距离用户视线（z=0处）的<length>（不能是<percentage>）偏移值。

关键字是方便的简写方法，等同于以下<percentage>值：

keyword	value
`left`	`0%`
`center`	`50%`
`right`	`100%`
`top`	`0%`
`bottom`	`100%`

正式语法

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

示例

Code	Sample
`transform: none;`	`<div class="box1"> </div>` `.box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; }`
`transform: rotate(30deg);`	`<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); }`
`transform: rotate(30deg); transform-origin: 0 0;`	`<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); }`
`transform: rotate(30deg); transform-origin: 100% 100%;`	`<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); }`
`transform: rotate(30deg); transform-origin: -1em -3em;`	`<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); }`
`transform: scale(1.7);`	`<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); }`
`transform: scale(1.7); transform-origin: 0 0;`	`<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; }`
`transform: scale(1.7); transform-origin: 100% -30%;`	`<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%; }`
`transform: skewX(50deg); 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%; }`
`transform: skewY(50deg); 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%; }`

规范

Specification	Status	Comment
CSS Transforms Level 1 transform-origin	Working Draft

初始值	`50% 50% 0`
适用元素	transformable elements
是否是继承属性	否
Percentages	refer to the size of bounding box
计算值	for `length` the absolute value, otherwise a percentage
Animation type	simple list of length, percentage, or calc

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.