CSS transform-origin 属性

设置旋转元素的基本位置：

div {
transform: rotate(45deg);
transform-origin: 20% 40%;
}

定义和用法

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

2D 变换可以更改元素的 x 轴和 y 轴。 3D 变换还可以更改元素的 z 轴。

为了更好地理解transform-origin属性，查看演示。

笔记：该属性必须与转换属性。

提示：为了更好地了解此属性3D 变换,查看演示。

默认值：	50% 50% 0
遗传：	不
可动画：	是的。阅读可动画的尝试一下
版本：	CSS3
JavaScript 语法：	对象.style.transformOrigin="0 0"尝试一下

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit-、-moz- 或 -o- 的数字指定使用前缀的第一个版本。

Property
transform-origin (two-value syntax)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 10.5 -o-
transform-origin (three-value syntax)	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

transform-origin: x-axis y-axis z-axis|initial|inherit;

Property Value	Description
x-axis	Defines where the view is placed at the x-axis. Possible values: left center right length %
y-axis	Defines where the view is placed at the y-axis. Possible values: top center bottom length %
z-axis	Defines where the view is placed at the z-axis (for 3D transformations). Possible values: length
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit