From cdb2f681a3cf407aa2ad736c78bbe4fb38f04470 Mon Sep 17 00:00:00 2001 From: pengshiyu <1940607002@qq.com> Date: Fri, 11 Feb 2022 22:35:12 +0800 Subject: [PATCH] fix --- .../demo/transform-scale.html | 56 ++++++++++++++++++ blog/front-end-combat/img/play-circle.png | Bin 0 -> 8588 bytes blog/front-end-combat/transform.md | 27 +++++++++ 3 files changed, 83 insertions(+) create mode 100644 blog/front-end-combat/demo/transform-scale.html create mode 100644 blog/front-end-combat/img/play-circle.png diff --git a/blog/front-end-combat/demo/transform-scale.html b/blog/front-end-combat/demo/transform-scale.html new file mode 100644 index 0000000..eba576c --- /dev/null +++ b/blog/front-end-combat/demo/transform-scale.html @@ -0,0 +1,56 @@ + + +
+
+ +

欲把西湖比西子

+

淡妆浓抹总相宜

+
\ No newline at end of file diff --git a/blog/front-end-combat/img/play-circle.png b/blog/front-end-combat/img/play-circle.png new file mode 100644 index 0000000000000000000000000000000000000000..dfbf22b2539b9c13af594126078876c79dc75a4c GIT binary patch literal 8588 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 E16F}V-2eap literal 0 HcmV?d00001 diff --git a/blog/front-end-combat/transform.md b/blog/front-end-combat/transform.md index 5c00048..ced9e4c 100644 --- a/blog/front-end-combat/transform.md +++ b/blog/front-end-combat/transform.md @@ -105,3 +105,30 @@ transform: translate() rotate(); [](demo/transform-translate-rotate.html ':include :type=code') [](demo/transform-translate-rotate.html ':include height=240') + +## 缩放 scale + +实现元素从中心点缩放效果 + +语法 + +```css +transform: scale(x轴缩放倍数, y轴缩放倍数); + +/* x、y等比例缩放 */ +transform: scale(缩放倍数); +``` + +| 效果 | 取值 | 示例 | +| ---- | ------ | ---------- | +| 放大 | 数值>1 | scale(1.2) | +| 不变 | 数值=1 | scale(1) | +| 缩小 | 数值<1 | scale(0.8) | + +示例: + +[](demo/transform-scale.html ':include :type=code') + +[](demo/transform-scale.html ':include height=270') + +https://www.bilibili.com/video/BV1xq4y1q7jZ?p=19&spm_id_from=pageDriver -- GitLab