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

• 一个值：
  • 必须是，，或left,center,right,top,bottom关键字中的一个。
• 两个值：
  • 其中一个必须是，，或left,center,right关键字中的一个。
  • 另一个必须是，，或top,center,bottom关键字中的一个。
• 三个值：
  • 前两个值和只有两个值时的用法相同。
  • 第三个值必须是。它始终代表Z轴偏移量。

浏览器支持

语法

取值

• x-offset：定义变形中心距离盒模型的左侧的或偏移值。
• y-offset：定义变形中心距离盒模型的顶的或偏移值。
• offset-keyword：left、right、top、bottom、center中之一，定义相对应的变形中心偏移。
• x-offset-keyword：left、right、center中之一，定义相对应的变形中心偏移。
• y-offset-keyword：top、bottom、center中之一，定义相对应的变形中心偏移。
• z-offset：定义变形中心距离用户视线（z=0处）的（不能是）偏移值。

关键字是方便的简写方法，等同于以下值：

实例

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*/
}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com