变换原点 | transform-origin
transform-origin
transform-origin属性允许您修改元素转换的原点。例如，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;
未明确设置的值将重置为其相应的值。
| 初始值 | 50% 50% 0 |
|---|---|
| 适用于 | transformable elements |
| 继承 | no |
| 百分比 | refer to the size of bounding box |
| 媒体 | visual |
| 计算值 | for <length> the absolute value, otherwise a percentage |
| 动画类型 | simple list of length, percentage, or calc |
| 规范的顺序 | One or two values, with length made absolute and keywords translated to percentages |
语法
transform-origin属性可以使用一个，两个或三个值来指定。
- 单值语法：该值必须是以下任何一个：
值
_x-offset_Is 一个<length>或一个<percentage>描述如何远离框的左边缘的原点的变换是 set._offset-keyword_Is 的一个left，right，top，bottom或center关键字描述所述相应 offset._y-offset_Is 一个<length>或一个<percentage>描述如何从远盒子的顶部边缘变换的原点是的 set._x 偏移 -keyword_Is 一个left，right或center关键字描述所述变换的原点从框的左边缘多远是 set._y 偏移 -keyword_Is 之一的top，bottom或center关键字描述所述变换的原点从箱的顶部边缘多远是 set._z-offset_Is 一个<length>（并且从不<percentage> 这将使该陈述无效）描述离用户眼多远 z = 0 原点设置。
关键字是方便的快捷方式，并且匹配以下<percentage>值：
| 关键字 | 值 |
|---|---|
| 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>
示例
有关示例，请参阅使用 CSS 转换。
现场示例
| 编码 | 样品 |
|---|---|
| transform: none; | |
| transform: rotate(30deg | |
| transform: rotate(30deg transform-origin: 0 0; | |
| transform: rotate(30deg transform-origin: 100% 100%; | |
| transform: rotate(30deg transform-origin: -10em -30em; | |
| transform: scale(1.9 | |
| transform: scale(1.9 transform-origin: 0 0; | |
| transform: scale(1.9 transform-origin: 100% -30%; | |
| transform: skewX(50deg transform-origin: 100% -30%; | |
| transform: skewY(50deg transform-origin: 100% -30%; | |
规范
| 规范 | 状态 | 评论 |
|---|---|---|
| CSS Transforms Level 1The definition of 'transform-origin' in that specification. | Working Draft | |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | (Yes) -webkit | (Yes)-webkit (Yes) | 3.5 (1.9.1)-moz 16.0 (16.0)2 | 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) | 5.5 (partial) 1 9.0 -ms 10.0 | No support | (Yes) -webkit |
| Support in SVG | (Yes) | ? | 41 (41)4 43 (43)5 | No support | (Yes) | ? |
| Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | (Yes)-webkit (Yes) | ? | 8.1 -webkit3 | ? | ? |
| Three-value syntax | ? | ? | ? | ? | ? | No support | ? |
| Support in SVG | ? | 41 (41)4 43 (43)5 | ? | ? | ? | ? | ? |
