css：2D转换之缩放scale

听海边涛声

已于 2024-10-07 19:08:05 修改

阅读量241

点赞数 2

文章标签： css 前端

于 2024-10-07 19:06:47 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/142744202

版权

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/scale

CSS 函数 scale() 用于修改元素的大小。

语法：

/*  x 和 y 是缩放的倍数，例如1表示1倍，即不缩放。小于1就是缩小，大于1就是放大 */
transform: scale(x, y);

或者

/* 表示等比缩放，y和x相同 */
transform: scale(x);

scale缩放的优势：

尽管直接修改width和height也能实现缩放，但它的缩放方式是宽度向两边，而高度是向下缩放（上沿不变），也会影响其它盒子。而通过scale缩放不会影响其它盒子，而且可以用transform-origin设置缩放的原点（默认以中心点作为原点缩放）。

示例

鼠标放上去宽和高都变为原来的2倍

开始展示：
在这里插入图片描述

鼠标放上去：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
    }

    div:hover {
      transform: scale(2, 2);
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

鼠标放上去宽度变为原来的2倍，高度不变

开始展示：
在这里插入图片描述

鼠标放上去：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
    }

    div:hover {
      transform: scale(2, 1);
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

等比缩放的简单写法

下面鼠标移上去，等比放大2倍：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
    }

    div:hover {
      transform: scale(2);
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

鼠标放上去宽和高都缩小为原来的0.5倍

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
    }

    div:hover {
      transform: scale(0.5);
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>