From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/transform-origin/index.html | 457 ++++++++++++++++++++++++ 1 file changed, 457 insertions(+) create mode 100644 files/zh-cn/web/css/transform-origin/index.html (limited to 'files/zh-cn/web/css/transform-origin') diff --git a/files/zh-cn/web/css/transform-origin/index.html b/files/zh-cn/web/css/transform-origin/index.html new file mode 100644 index 0000000000..c9e578554c --- /dev/null +++ b/files/zh-cn/web/css/transform-origin/index.html @@ -0,0 +1,457 @@ +--- +title: transform-origin +slug: Web/CSS/transform-origin +tags: + - CSS + - CSS Property + - CSS Transforms +translation_of: Web/CSS/transform-origin +--- +

{{ CSSRef }}

+ +

transform-origin CSS属性让你更改一个元素变形的原点。

+ +
{{EmbedInteractiveExample("pages/css/transform-origin.html")}}
+ + + +

转换起点是应用转换的点。例如，rotate()函数的转换原点是旋转中心。（这个属性的应用原理是先用这个属性的赋值转换该元素，进行变形，然后再用这个属性的值把元素转换回去）

+ +

语法

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

+ + + +

值

+ +
+
x-offset
+
定义变形中心距离盒模型的左侧的{{cssxref("<length>")}}或{{cssxref("<percentage>")}}偏移值。
+
offset-keyword
+
left，right，top，bottom或center中之一，定义相对应的变形中心偏移。
+
y-offset
+
定义变形中心距离盒模型的顶的{{cssxref("<length>")}}或{{cssxref("<percentage>")}}偏移值。
+
x-offset-keyword
+
left，right或center中之一，定义相对应的变形中心偏移。
+
y-offset-keyword
+
top，bottom或center中之一，定义相对应的变形中心偏移。
+
z-offset
+
定义变形中心距离用户视线（z=0处）的{{cssxref("<length>")}}（不能是{{cssxref("<percentage>")}}）偏移值。
+
+ +

关键字是方便的简写方法，等同于以下{{cssxref("<percentage>")}}值：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keywordvalue
left0%
center50%
right100%
top0%
bottom100%
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CodeSample
+

transform: none;

+ 		+ + +
{{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }}
+
+

transform: rotate(30deg);

+ 		+ + +
{{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }}
+
+

transform: rotate(30deg);
+ transform-origin: 0 0;

+ 		+ + +
{{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }}
+
+

transform: rotate(30deg);
+ transform-origin: 100% 100%;

+ 		+ + +
{{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }}
+
+

transform: rotate(30deg);
+ transform-origin: -1em -3em;

+ 		+ + +
{{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }}
+
+

transform: scale(1.7);

+ 		+ + +
{{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }}
+
+

transform: scale(1.7);
+ transform-origin: 0 0;

+ 		+ + +
{{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }}
+
+

transform: scale(1.7);
+ transform-origin: 100% -30%;

+ 		+ + +
{{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }}
+
+

transform: skewX(50deg);
+ transform-origin: 100% -30%;

+ 		+ + +
{{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }}
+
+

transform: skewY(50deg);
+ transform-origin: 100% -30%;

+ 		+ + +
{{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }}
+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}{{ Spec2('CSS3 Transforms') }}
+ +

{{Cssinfo}}

+ +

浏览器兼容

+ + + +

{{Compat("css.properties.transform-origin")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf