CSS Transform缩放，不缩放子元素

在本文中，我们将介绍CSS中的Transform缩放属性，着重讲解如何不缩放子元素。

阅读更多：CSS 教程

什么是CSS Transform缩放？

CSS的Transform缩放属性允许我们对元素进行缩放操作，即通过改变元素的尺寸来实现放大或缩小的效果。在CSS中，可以使用scale()函数来定义缩放的比例。例如，scale(1)代表原始尺寸，scale(1.5)表示放大1.5倍，而scale(0.5)表示缩小到原始尺寸的一半。

下面是一个示例，展示了如何在CSS中使用Transform缩放：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(1.5);
}

上述示例中，一个100×100像素的红色方块被缩放为150×150像素。

如何不缩放子元素？

然而，在某些情况下，我们可能希望对一个元素进行缩放操作，但不想影响到元素的子元素。默认情况下，使用Transform缩放属性会同时缩放元素及其子元素，这可能不符合我们的需求。

为了不缩放子元素，我们可以使用一个技巧：在元素内部添加一个额外的容器，然后将Transform缩放属性应用于该容器，而不是元素本身。这样就可以实现缩放元素而不影响其子元素。

下面是一个示例，展示了如何不缩放子元素：

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 200px;
  height: 200px;
  background-color: blue;
  transform: scale(1.5);
}

.child {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(0.67);
}

上述示例中，我们在父元素内部添加了一个子元素，并分别对父元素和子元素应用了Transform缩放属性。父元素被放大到300×300像素，而子元素则被缩小到原始尺寸的2/3，即67×67像素。由于Transform缩放属性只作用于父元素，子元素保持了其原始尺寸。

其他解决方案

除了上述的方法，还可以使用以下两种解决方案来避免缩放子元素的问题。

使用绝对定位：将子元素设置为绝对定位，并调整其位置以适应缩放后的父元素大小。这样可以保持子元素的原始尺寸不受影响。

.parent {
  width: 200px;
  height: 200px;
  background-color: blue;
  transform: scale(1.5);
  position: relative;
}

.child {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用Transform反向缩放：在父元素上应用一个与所需缩放比例的倒数相等的Transform缩放属性。这样可以抵消父元素的缩放效果，使子元素保持原始尺寸。

.parent {
  width: 200px;
  height: 200px;
  background-color: blue;
  transform: scale(0.67); /* 反向缩放为1.5的倒数，即0.67 */
}

.child {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(1.5);
}

上述两种解决方案都可以实现不缩放子元素的效果，选择应根据具体情况而定。