CSS 参考手册

CSS3 transform-origin 属性

属性定义及使用说明

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

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

为了更好地理解Transform-Origin属性，请查看这个演示.

注意： 使用此属性必须先使用 transform 属性。

Tip:Safari/Chrome用户：为了更好地理解3D 转换属性,请查看演示.

默认值：	50% 50% 0
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transformOrigin="20% 40%"

语法

实例

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值： left center right length %
y-axis	定义视图被置于 Y 轴的何处。可能的值： top center bottom length %
z-axis	定义视图被置于 Z 轴的何处。可能的值： length

值

描述

x-axis

定义视图被置于 X 轴的何处。可能的值：

left
center
right
length
%

y-axis

定义视图被置于 Y 轴的何处。可能的值：

top
center
bottom
length
%

z-axis

定义视图被置于 Z 轴的何处。可能的值：

length

实例

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

div {
    transform: rotate(45deg);
    transform - origin: 20 % 40 % ; - ms - transform: rotate(45deg);
    /* IE 9 */
    - ms - transform - origin: 20 % 40 % ;
    /* IE 9 */
    - webkit - transform: rotate(45deg);
    /* Safari and Chrome */
    - webkit - transform - origin: 20 % 40 % ;
    /* Safari and Chrome */
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
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 transform-origin →

CSS 属性

CSS3 transform-origin 属性

属性定义及使用说明

语法

实例

实例

浏览器支持

分类导航