这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
概述
transform-origin CSS属性让你更改一个元素变形的原点。例如，rotate()的transform-origin 是旋转的中心点 (这个属性的应用原理是先用这个属性的负值translate该元素，进行变形，然后再用这个属性的值把元素translate回去)。
没有明确定义的值会被重设回他们对应的值（Not explicitly set values are reset to their corresponding values.）
| 初始值 | 50% 50% 0 |
|---|---|
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the size of bounding box |
| 适用媒体 | visual |
| 计算值 | for length the absolute value, otherwise a percentage |
| 是否适用于 CSS 动画 | yes, as a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. |
| 正规顺序 | One or two values, with length made absolute and keywords translated to percentages |
Syntax
/* 单值语法 */ transform-origin: 2px; transform-origin: bottom; /* 双值语法 */ /* 用两个数字值先水平后垂直，用一个数值一关键字或两关键字不强求顺序 */ transform-origin: 3cm 2px; /* x-offset y-offset */ transform-origin: 2px left; /* y-offset x-offset-keyword */ transform-origin: left 2px; /* x-offset-keyword y-offset */ transform-origin: right top; /* x-offset-keyword y-offset-keyword */ transform-origin: top right; /* y-offset-keyword x-offset-keyword */ /* 三值语法 */ transform-origin: 2px 30% 10px; /* x-offset y-offset z-offset */ transform-origin: 2px left 10px; /* y-offset x-offset-keyword z-offset */ transform-origin: left 5px -3px; /* x-offset-keyword y-offset z-offset */ transform-origin: right bottom 2cm; /* x-offset-keyword y-offset-keyword z-offset */ transform-origin: bottom right 2cm; /* y-offset-keyword x-offset-keyword z-offset */
Values
- 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% |
形式语法
[ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?
示例
更多示例请参见使用CSS变形。
即时示例
transform: none; |
|
transform: rotate(30deg); |
|
transform: rotate(30deg); |
|
transform: rotate(30deg); |
|
transform: rotate(30deg); |
|
transform: scale(1.9); |
|
transform: scale(1.9); |
|
transform: scale(1.9); |
|
transform: skewX(50deg); |
|
transform: skewY(50deg); |
|
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| CSS Transforms Level 1 transform-origin |
Working Draft |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) -webkit | 3.5 (1.9.1)-moz 16.0 (16.0) |
9.0-ms 10.0 |
10.5-o 12.10 |
3.1-webkit |
| Three-value syntax | (Yes) -webkit | 10 (10)-moz 16.0 (16.0) |
10.0 | 未实现 | (Yes) -webkit |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? 11-webkit |
? | ? |
| Three-value syntax | ? | ? | ? | ? | 未实现 | ? |
Note: Internet Explorer 5.5或更高支持Matrix Filter 属性，也可以达到类似效果