MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

transform-origin CSS属性让你更改一个元素变形的原点。例如,rotate()的transform-origin 是旋转的中心点 (这个属性的应用原理是先用这个属性的负值translate该元素,进行变形,然后再用这个属性的值把元素translate回去)。

没有明确定义的值会被重设回他们对应的值(Not explicitly set values are reset to their corresponding values.)

初始值50% 50% 0
适用元素transformable elements
是否是继承属性
Percentagesrefer 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
leftright,topbottomcenter中之一,定义相对应的变形中心偏移。
y-offset
定义变形中心距离盒模型的顶的<length><percentage>偏移值。
x-offset-keyword
leftrightcenter中之一,定义相对应的变形中心偏移。
y-offset-keyword
topbottomcenter中之一,定义相对应的变形中心偏移。
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-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: skewY(50deg);
transform-origin: 100% -30%;
 

规范

规范 状态 备注
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 属性,也可以达到类似效果

参见

文档标签和贡献者

 此页面的贡献者: Simplexible, Sebastianz, Prinz_Rana, fscholz, FredWe, fskuok
 最后编辑者: Simplexible,