CSS3中2D转换之缩放

最新推荐文章于 2025-07-08 01:28:11 发布

尤里卡_1006 (胡健)

最新推荐文章于 2025-07-08 01:28:11 发布

阅读量440

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： html5 css3 html

本文链接：https://blog.csdn.net/qq_51735681/article/details/114991543

笔记专栏收录该内容

53 篇文章

订阅专栏

本文探讨了CSS3中的2D转换功能，重点在于如何实现盒子的缩放效果。通过实例代码解释了如何设置缩放中心点，并展示了如何在鼠标悬停时动态调整盒子的尺寸。强调了使用缩放属性相对于直接更改宽高带来的优势，即在中心点进行缩放，不会影响周围元素的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3中2D转换之缩放:
首先给一个dicv盒子作为研究对象，然后对盒子的性质进行定义，代码如下：

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transform-origin: left top;
     }

备注：
margin: 100px auto;这句代码的意思是缩放中心点的位置位于页面的水平方向的中心和竖直方向离顶100px的距离处（水平居中，竖直离顶100px）。
transform-origin: left top;这句代码的意思是设置缩放的中心点为左上，不设置的时候默认中心点为center

接下来，我们看缩放效果的定义和调整。这里我们以鼠标经过发生缩放为例

 div:hover {
            transform: scale(2, 2);
           }

这串代码的意思是当鼠标经过的时候，盒子的宽和高都变成原来的两倍。这里其实是对transform: scale();的用法，接下来，我们详细讲解一下transform: scale();的用法：
transform: scale(); 括号里面写数字不跟单位，数字的含义就是倍数
例如：
transform: scale(2, 2); 意思是宽、高都为原来的两倍
transform: scale(1, 2); 宽度为原来的两倍，高度不变
transform: scale(2); 意思是宽和高等比例变化相同的倍数（此处为2倍）
transform: scale(0.5, 0.5); 意思是宽和高都缩小为原来的0.5倍（数字<1就表示缩小）
scale的优势之处：
之前的直接改变宽和高的大小的方法是该盒子在现在的位置上宽向左右延申、高直接向下延申，会影响其他盒子的位置，而 scale是在盒子中心点(缩放的中心点可以被设置)的位置上向四面八方延申，不会影响其他盒子的位置。