CSS - transform-origin 属性



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

默认情况下,变换的原点是 center

可能的值

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

  • x-offset:一个 <length><percentage> 值,用于定义 transform-origin 从盒子左侧设置的距离。

  • offset-keyword:指定相应偏移值的关键字,即 left、right、top、bottomcenter

  • y-offset:一个 <length><percentage> 值,用于定义 transform-origin 从盒子顶部设置的距离。

  • x-offset-keyword:指定相应偏移值的关键字,即 left、rightcenter。它定义了 transform-origin 从盒子左侧设置的距离。

  • y-offset-keyword:指定相应偏移值的关键字,即 top、bottomcenter。它定义了 transform-origin 从盒子顶部设置的距离。

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

下表列出了关键字和百分比值的映射关系

关键字 百分比值
left 0%
center 50%
right 100%
top 0%
bottom 100%

应用于

所有可转换的元素。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

语法

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

这里 x-axis、y-axis、z-axis 值分别表示变换原点的水平、垂直和深度位置。它们可以使用各种单位,例如像素、百分比或关键字。

以下是语法可以写出的各种方式

/* one-value syntax */ transform-origin = 20px; transform-origin = 30%; transform-origin = left; /* x-offset-keyword / y-offset-keyword */ transform-origin = left top; /* y-offset-keyword / x-offset-keyword */ transform-origin = bottom right; /* x-offset-keyword / y-offset */ transform-origin = left 5px; /* y-offset-keyword / x-offset-keyword */ transform-origin = bottom 10%; /* x-offset / y-offset */ transform-origin = 3cm 5px | 25% 30%; /* x-offset / y-offset / z-offset */ transform-origin = 3cm 5px -5px; /* x-offset-keyword / y-offset-keyword / z-offset */ transform-origin = left top 3cm; /* y-offset-keyword / x-offset-keyword / z-offset*/ transform-origin = bottom right 3cm;

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

1. 单值语法

  • 值必须是 <length><percentage> 或以下关键字之一:left、center、right、topbottom

  • 当指定单个值(作为 <length><percentage>)时,它确定水平偏移量 (x-axis)。

2. 双值语法

  • 一个值必须是 <length><percentage> 或以下关键字之一:left、centerright

  • 第二个值必须是 <length><percentage> 或以下关键字之一:top、centerbottom

  • 当指定两个或多个值并且其中任何一个值为关键字 center 时,第一个值确定水平偏移量,第二个值确定垂直偏移量。

3. 三值语法

  • 前两个值与双值语法的相同。

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

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

CSS transform-origin - 示例

以下示例演示了与变换函数一起使用的 transform-origin 的各种值的用法

Open Compiler
<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 Property</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>
广告