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/scale/index.html | 117 +++++++++++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 files/zh-cn/web/css/scale/index.html (limited to 'files/zh-cn/web/css/scale') diff --git a/files/zh-cn/web/css/scale/index.html b/files/zh-cn/web/css/scale/index.html new file mode 100644 index 0000000000..e77add2f27 --- /dev/null +++ b/files/zh-cn/web/css/scale/index.html @@ -0,0 +1,117 @@ +--- +title: scale +slug: Web/CSS/scale +tags: + - CSS + - transform +translation_of: Web/CSS/scale +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS属性 scale 允许你可以分别且独立地指定CSS属性 {{CSSxRef("transform")}} 缩放的比例。这更好地映射到典型的UI（用户界面）用法中，并免去了在指定变换值时必须记住变换函数的精确顺序的麻烦。

+ +

语法

+ +
/* 关键值 */
+scale: none;
+
+/* 单个值 */
+/* 设定比1大的数值使该元素变大 */
+scale: 2;
+/* 设定比1小的数值使该元素缩小 */
+scale: 0.5;
+
+/* 两个值 */
+scale: 2 0.5;
+
+/* 三个值 */
+scale: 2 0.5 2;
+ +

取值

+ +
+
单一数值
+
单一的数值即指定了一个缩放系数，同时作用于X轴和Y轴让该元素进行缩放，相当于指定了单个值的scale()(2D缩放)函数。
+
两个长度/百分比值
+
两个数值即分别指定了2D比例的X轴和Y轴的缩放系数，相当于指定了两个值的scale()（2D缩放）函数。
+
三个长度/百分比值
+
三个数值即分别指定了3D比例的X轴、Y轴和Z轴的缩放系数. 相当于一个scale3d()函数。
+
none
+
指定不进行缩放。
+
+ +

标准语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

HTML

+ +
<div>
+  <p class="scale">Scaling</p>
+</div>
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.scale {
+  transition: scale 1s;
+}
+
+div:hover .scale {
+  scale: 2 0.7;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Examples")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS Transforms 2", "#individual-transforms", "individual transforms")}}{{Spec2("CSS Transforms 2")}}Initial definition.
+ +

{{CSSInfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.scale")}}

-- cgit v1.2.3-54-g00ecf