transform-origin
================

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

尝试一下
----

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

默认的转换原点是 `center`

语法
--


```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;
```


`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%` |

### 形式语法
```

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>    
  
```

示例
--

| Code | Sample |
| --- | --- |
| `transform: none;` | 

```html
<div class="box1">&nbsp;</div>
```



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


 |
| `transform: rotate(30deg);` | 

```html
<div class="box2">&nbsp;</div>
```



```css
.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;` | 

```html
<div class="box3">&nbsp;</div>
```



```css
.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%;` | 

```html
<div class="box4">&nbsp;</div>
```



```css
.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;` | 

```html
<div class="box5">&nbsp;</div>
```



```css
.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);` | 

```html
<div class="box6">&nbsp;</div>
```



```css
.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;` | 

```html
<div class="box7">&nbsp;</div>
```



```css
.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%;` | 

```html
<div class="box8">&nbsp;</div>
```



```css
.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%;` | 

```html
<div class="box9">&nbsp;</div>
```



```css
.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%;` | 

```html
<div class="box10">&nbsp;</div>
```



```css
.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 |
| --- |
| CSS Transforms Module Level 1 # transform-origin-property |

|  |  |
| --- | --- |
| 初始值 | `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 |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 CSS 变形 (en-US)