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 ,则第一个值表示水平偏移量,第二个值表示垂直偏移量。

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
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*/
}

上篇: transform

下篇: transform-style