CSS - transform-origin 属性

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

默认情况下，transform 的原点是中心。

可能的值

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

x-offset：一个 <length> 或 <percentage>值，用于定义设置转换原点距离框左侧的距离。
offset-keyword：指定相应偏移值的关键字，即 left, right, top, bottom或 center。
y-offset：一个 <length> 或 <percentage>值，用于定义设置转换原点距离框的顶部有多远。
x-offset-keyword：指定相应偏移值的关键字，即左偏移值、偏移右偏移值或居中偏移值。它定义了设置转换原点离框左侧有多远。
y-offset-keyword：指定相应偏移值的关键字，即顶部、底部或中心。它定义了设置转换原点距离框顶部多远。
z-offset：一个 <length> 值，用于定义设置 z=0 原点离用户眼睛多远。<percentage>值是不可接受的，因为这会使语句无效。

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

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

适用于

所有可转换的元素。

语法


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

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

以下是编写语法的各种方法：


/* 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、top 和 bottom 之一。
当指定单个值（如<length>或<percentage>时，它将确定水平偏移量（x 轴）。

2. 双值语法

一个值必须是 <length>、<percentage>，或者是关键字 left、center 和 right 之一。
第二个值必须是 <length>、<percentage> 或关键字 top、center 和 bottom 之一。
如果指定了两个或多个值，并且其中一个值是关键字中心，则第一个值确定水平偏移量，第二个值确定垂直偏移量。

3. 三值语法

前两个值与两个值语法的值相同。
第三个值必须始终是 <length> 值，表示 Z 偏移量。

注意：对于所有SVG元素，transform-origin的初始值为0 0，但根<svg>元素和<svg>元素除外，它们是外部XML命名空间的直接后代，以及transform-origin为50%的元素。

CSS transform-origin - 示例

以下示例演示了如何使用与转换函数一起使用的各种 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 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>

打印本页