DevShelf

Appearance

transform-origin ​

描述 ​

transform-origin CSS 属性设置元素转换的原点。

效果展示 ​

语法 ​

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;

值 ​

  • x-offset <length> 或 <percentage> 描述变换原点距框左边缘的距离。
  • offset-keyword 是描述相应偏移量的 left 、 right 、 top 、 bottom 或 center 关键字之一。
  • y-offset 是一个 <length> 或 <percentage> 描述变换原点距离框的顶部边缘有多远。
  • x-offset-keyword 是 left 、 right 或 center 关键字之一，描述设置变换原点距框左边缘的距离。
  • y-offset-keyword 是 top 、 bottom 或 center 关键字之一，描述设置变换原点距框顶部边缘的距离。
  • z-offset 是一个 <length> （而不是 <percentage> ，这会使语句无效）描述 z=0 原点距离用户眼睛有多远。