CSS 属性

CSS属性transform-origin有助于设置元素转换的原点。这是转变发生的点。例如，旋转中心是 rotate() 函数的变换原点。

a 的原点默认情况下，transform 位于中心。

属性值

CSS 属性transform-origin 可以具有以下值:

  • x-offset:<length> 或 <percentage> 值定义设置变换原点距框左侧多远。

  • offset-keyword:指定相应偏移值的关键字，即 left、right、顶部、底部或中心。

  • y 偏移:A <length> 或 <percentage> 值，定义设置变换原点距框顶部的距离。

  • x-offset-keyword:指定相应偏移值的关键字，即 left、right 或 center。它定义了设置变换原点距框左侧多远。

  • y-offset-keyword:指定相应偏移值的关键字，即 top、底部或中心。它定义了设置变换原点距框顶部的距离。

  • z-offset: A <length> 值，定义设置 z=0 原点距用户眼睛的距离。 <percentage> 值是不可接受的，因为这会使语句无效。

以下内容table 列出了关键字和百分比值的映射:

关键字百分比值
left0%
center50%
right100%
top0%
bottom100%

适用范围

所有可变形元素。

语法

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

此处为 x 轴、y 轴、z: 轴值分别表示变换原点的水平、垂直和深度位置。它们可以用各种单位指定，例如像素、百分比或关键字。

以下是语法的各种编写方式:

/* 1个值的语法 */
transform-origin = 20px;
transform-origin = 30%;
transform-origin = left;

/* x 偏移关键字 / y 偏移关键字 */
transform-origin = left top;

/* y 偏移关键字 / x 偏移关键字 */
transform-origin = bottom right;

/* x 偏移关键字 / y 偏移 */
transform-origin = left 5px;

/* y 偏移关键字 / x 偏移关键字 */
transform-origin = bottom 10%;

/* x 偏移 / y 偏移 */
transform-origin = 3cm 5px | 25% 30%;

/* x 偏移 / y 偏移 / z 偏移 */
transform-origin = 3cm 5px -5px;

/* x 偏移关键字 / y 偏移关键字 / z 偏移 */
transform-origin = left top 3cm;

/* y 偏移关键字 / x 偏移关键字 / z 偏移*/
transform-origin = bottom right 3cm;

CSS 属性transform-origin可以通过其中一种方式指定，即使用一个、两个或三个值，其中每个值表示一个偏移值。

1.一值语法

  • 值必须是 <length>、<percentage> 或关键字 left、center、right、top 和 Bottom 之一。

  • 当指定单个值（如 <length> 或 <percentagenotransR）时，它确定水平偏移（x 轴）。

2.二值语法

  • 一个值必须是 <length>、<percentage> 或关键字 left、center 和 right 之一。

  • 第二个值必须是 <length>、<percentage> 或关键字 top、center 和 Bottom 之一。

  • 当有两个或多个值时指定并且其中一个值是关键字中心，那么第一个值确定水平偏移，第二个值确定垂直偏移。

3.三值语法

  • 前两个值与二值语法相同。

  • 第三个value 必须始终是 <length> 值，表示 Z 偏移量。

注意:对于所有 SVG 元素，transform-origin 的初始值为 0 0，除了根 <svg> 元素和作为外部 XML 命名空间直接后代的 <svg> 元素，以及变换源为 50% 50% 的元素。

CSS transform-origin: 示例

以下示例演示了与变换函数一起使用的各种变换原点值的使用:

<html>
<head>
<style>
   #div1 {
      position: relative;
      height: 50px;
      width: 50px;
      margin: 30px;
      padding: 20px;
      border: 1px dotted black;
   }

   .sec-div {
      width: 30px;
      height: 30px;
      padding: 20px;
      position: absolute;
      border: 1px solid black;
      background-color: lightblue;
   }

   #initial-val {
      transform: rotate(30deg);
      transform-origin: 50% 50%;
   }

   #ykey-xkey-z {
      transform: rotate(45deg);
      transform-origin: top left 3cm;
   }

   #xkey-y {
      transform: scale(1.2);
      transform-origin: right 20%;
   }

   #x-y {
      transform: translate(10px 30px);
      transform-origin: 30px 10px;
   }

   #x-yNeg-percent{
      transform: skewX(30deg);
      transform-origin: 80% -20%;
   }
</style>
</head>
<body>
   <h1>The transform-origin 属性</h1>

   <div id="div1">
      <div class="sec-div" id="initial-val">50% 50%</div>
   </div>
   <p>transform: rotate(30deg);
      transform-origin: 50% 50%;</p>
   
   <div id="div1">
      <div class="sec-div" id="ykey-xkey-z">top left 3cm</div>
   </div>
   <p>transform: rotate(45deg);
      transform-origin: top left 3cm;</p>
   
   <div id="div1">
      <div class="sec-div" id="xkey-y">right 20%</div>
   </div>
   <p>transform: scale(1.2);
      transform-origin: right 20%;</p>
   
   <div id="div1">
      <div class="sec-div" id="x-y">30px 10px</div>
   </div>
   <p>transform: translate(10px 30px);
      transform-origin: 30px 10px;</p>
   
   <div id="div1">
      <div class="sec-div" id="x-yNeg-percent">100% -30%</div>
   </div>
   <p>transform: skewX(30deg);
      transform-origin: 80% -20%;</p>
</body>
</html>