CSS3 transform-origin 属性使用方法及示例

transform-Origin 属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。

默认值：	50% 50% 0
适用于：	可变形元素
继承：	没有
可动画制作：	是。请参考动画属性。
版本：	CSS3的新功能
JavaScript语法：	object.style.transformOrigin="20@%"

transform-origin的使用语法

该属性的语法如下：

transform-origin: x-position | y-position | z-position | initial | inherit

注意：如果仅为transform-origin属性指定一个值，则假定第二个值为center，它等于50%的值。

下面的示例演示了如何使用transform-origin属性。

示例

img {
    /* Chrome, Safari, Opera */
    -webkit-transform: rotate(30deg);
    -webkit-transform-origin: 25% bottom;
    /* Firefox */
    -moz-transform: rotate(30deg);
    -moz-transform-origin: 25% bottom;
    /* IE 9 */
    -ms-transform: rotate(30deg);
    -ms-transform-origin: 25% bottom;
    
    transform: rotate(30deg);
    transform-origin: 25% bottom;
}

测试看看‹/›

注意：如果两个值中的至少一个不是关键字，则第一个值代表变换原点的水平位置（或偏移），第二个值代表变换原点的垂直位置（或偏移）。

属性值

下表描述了此属性的值。

值	描述
x-position	表示变换原点的水平位置（或偏移）。它可以具有以下值之一： percentage -定义相对于元素宽度的偏移量。 length -定义了使用的长度值的偏移量。 left -等于0％或零宽度。 center -等于盒子宽度的50％或一半。 right -等于100％或整个盒子的宽度。
y-position	表示变换原点的垂直位置（或偏移）。它可以具有以下值之一： percentage -定义相对于元素高度的偏移量。 length -定义了使用的长度值的偏移量。 top -等于0％或零高度。 center -等于盒子高度的50％或一半。 bottom -等于100％或整个盒子的高度。
z-position	一个length值，它描述了距离用户眼睛多远的Z = 0原点（对于3D变换）。百分比值无效。
initial	将此属性设置为其默认值。
inherit	如果指定，则关联元素采用其父元素transform-origin的属性值。

浏览器兼容性

transform-origin属性浏览器的兼容性，下表中的数字表示支持该属性的浏览器最低版本号；所有主流浏览器均支持该属性。

	Firefox （2D）3.5 +，（3D）10+ ^-moz-，16 + Chrome （2D）4 +，（3D）12+ ^-webkit-，36 + Internet Explorer （2D）9 ^-ms-，10+ Apple Safari （2D）3.2 +，（3D）4+ ^-webkit- Opera （2D）10.5+ -o ^-，（2D）（3D）15+ ^-webkit-，23+

进一步阅读

请参考以下教程：CSS3 2D变换，CSS3 3D变换

CSS3 transform-style 属性 CSS3 transform 属性

CSS3 transform-origin 属性使用方法及示例

transform-origin的使用语法

属性值

浏览器兼容性

进一步阅读

CSS 参考手册

CSS @规则(RULES)

CSS 属性大全