transform-origin
版本: CSS3
transform-origin CSS属性让你更改一个元素变形的原点
示例
/* one-value syntax */ transform-origin: 2px; transform-origin: bottom; /* x-offset | y-offset */ transform-origin: 3cm 2px; /* x-offset-keyword | y-offset */ transform-origin: left 2px; /* x-offset-keyword | y-offset-keyword */ transform-origin: right top; /* y-offset-keyword | x-offset-keyword */ transform-origin: top right; /* x-offset | y-offset | z-offset */ transform-origin: 2px 30% 10px; /* x-offset-keyword | y-offset | z-offset */ transform-origin: left 5px -3px; /* x-offset-keyword | y-offset-keyword | z-offset */ transform-origin: right bottom 2cm; /* y-offset-keyword | x-offset-keyword | z-offset */ transform-origin: bottom right 2cm; /* global values */ transform-origin: inherit; transform-origin: initial; transform-origin: unset;
transform-origin
属性可以使用一个,两个或三个值来指定,其中每个值都表示一个偏移量。没有明确定义的偏移将重置为其对应的初始值。
如果定义了两个或更多值并且没有值的关键字,或者唯一使用的关键字是
center
,则第一个值表示水平偏移量,第二个值表示垂直偏移量。
- 一个值:
-
两个值:
-
其中一个必须是
<length>
,<percentage>
,或left
,center
,right
关键字中的一个。 -
另一个必须是
<length>
,<percentage>
,或top
,center
,bottom
关键字中的一个。
-
其中一个必须是
-
三个值:
- 前两个值和只有两个值时的用法相同。
-
第三个值必须是
<length>
。它始终代表Z轴偏移量。
浏览器支持
![]() |
![]() |
![]() |
![]() |
![]() |
IE9以上版本的浏览器都支持
transform
|
语法
transform-origin : x-offset y-offset | offset-keyword x-offset-keyword y-offset-keyword | z-offset
取值
-
x-offset
:定义变形中心距离盒模型的左侧的
<length>
或<percentage>
偏移值。 -
y-offset
:定义变形中心距离盒模型的顶的
<length>
或<percentage>
偏移值。 -
offset-keyword
:
left
、right
、top
、bottom
、center
中之一,定义相对应的变形中心偏移。 -
x-offset-keyword
:
left
、right
、center
中之一,定义相对应的变形中心偏移。 -
y-offset-keyword
:
top
、bottom
、center
中之一,定义相对应的变形中心偏移。 -
z-offset
:定义变形中心距离用户视线(z=0处)的
<length>
(不能是<percentage>
)偏移值。
关键字是方便的简写方法,等同于以下
<percentage>
值:
keyword | value |
---|---|
left
|
0%
|
center
|
50%
|
right
|
100%
|
top
|
0%
|
bottom
|
100%
|
默认值 | 50% 50%,效果等同于center center |
适用于 | 所有块级元素及某些内联元素 |
继承性 | 无 |
动画性 | 当值为数值时 |
计算值 | 除了指定绝对值,否则都为百分比 |
实例
div{ transform:rotate(45deg); transform-origin:20% 40%; -ms-transform:rotate(45deg); /*ie9*/ -ms-transform-origin:20% 40%; /*ie9*/ -webkit-transform:rotate(45deg); /*safari and chrome*/ -webkit-transform-origin:20% 40%; /*safari and chrome*/ }