CSS transform-origin属性

定义和用法

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

注意：此属性必须与transform属性一起使用。

特征	说明
默认值	50% 50% 0
继承	没有
动画	有。CSS动画参考
CSS版本	CSS3
JavaScript语法	object.style.transformOrigin="0 0"尝试一下

表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

属性	IE/Edge	Chrome	FireFox	Safari	Opera
属性名称
transform-origin(2D)	10.0 9.0 -ms-	36.0 4.0 -webkit-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 10.5 -o-
transform-origin(3D)	10.0	36.0 12.0 -webkit-	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;

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

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

尝试一下

属性值	描述
x-axis	定义视图放置在x轴的位置。可能的值： left center right length %
y-axis	定定义视图放置在y轴的位置。可能的值： top center bottom length %
z-axis	定定义视图放置在z轴的位置（用于3D变换）。可能的值： length
initial	将此属性设置为其默认值。查看initial关键字
inherit	从其父元素继承此属性。查看inherit关键字