From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../web/css/transform-function/scale/index.html | 112 +++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 files/zh-cn/web/css/transform-function/scale/index.html (limited to 'files/zh-cn/web/css/transform-function/scale/index.html') diff --git a/files/zh-cn/web/css/transform-function/scale/index.html b/files/zh-cn/web/css/transform-function/scale/index.html new file mode 100644 index 0000000000..7f43221751 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/scale/index.html @@ -0,0 +1,112 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +--- +
{{CSSRef}}
+ +

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

+ +

+ +

该变换通过一个二维向量确定在一个方向缩放的多少。如果缩放向量的两个坐标是相等的，那么所讲是均等的，或者说是各向同的，同时元素的形状是被保持的。这种情况下进行的是位似变换。

+ +

当坐标值处于区间 [-1, 1] 之外时，该变换将在相应的坐标方向上放大该元素，当处在区间之中时，该变换将在相应的坐标方向上缩小该元素。当值为1时将不进行任何处理，当为负数时，将进行像素点反射之后再进行大小的修改。

+ +
scale() 仅适用于在欧几里德平面（二维平面）上的变换。如果需要进行空间中的缩放，必须使用 scale3D() 。
+ +

语法

+ +
scale(sx)
+ +

或

+ +
scale(sx, sy)
+ +

值

+ +
+
sx
+
{{cssxref("<number>")}}，表示缩放向量的横坐标。
+
sy
+
{{cssxref("<number>")}} ，表示缩放向量的纵坐标。如果未设置，则他的默认值被设置为 sx。 从而使得元素在保持原有形状下均等缩放
+
+ + + + + + + + + + + + + + + + + + + + + +
ℝ2上的笛卡尔坐标变换ℝℙ2上的齐次坐标变换ℝ3上的笛卡尔坐标变换ℝℙ3上的齐次坐标变换
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
+ +

示例

+ +

单一维度缩放

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  /* 等同于变换: scaleX(2) scaleY(2);*/
+  transform: scale(2);
+  background-color: blue;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("单一维度缩放","100%","200")}}

+ +

在X和Y两个维度缩放并移动缩放中心

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  /* 等同于 scaleX(2) scaleY(0.5) */
+  transform: scale(2, 0.5);
+  transform-origin: left;
+  background-color: blue;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("在X和Y两个维度缩放并移动缩放中心","100%","200")}}

-- cgit v1.2.3-54-g00ecf