变换原点 | 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属性可以使用一个，两个或三个值来指定。
- 单值语法：该值必须是以下任何一个：
- 一个
<length> - 一个
<percentage> - 关键字
left，center，right，top，bottom
- 一个
- 双值语法：
- 一个值必须是一个
<length>，或者<percentage>，或者关键字之一left，center，right - 其他值必须是一个
<length>，或一个<percentage>，或其中一个关键字top，center，bottom
- 一个值必须是一个
- 三值语法：
- 前两个值与双值语法相同
- 第三个值必须是一个
<length>
值
_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 | ? | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
