缩放父元素，但删除子元素的缩放

Question

我目前正在使用scale制作一些css动画。有没有办法限制子元素不按比例缩放，只有父元素可以缩放。

＆＃13;

＆＃13;

.scale {
    max-width : 200px;
    height : 200px;
    background-color : beige;
    -webkit-transition: transform 0.3s linear;
    -webkit-transform-origin : top left;
}

.scale:hover {
    -webkit-transform : scale(2.0);
    -webkit-transition: transform 0.3s linear;
 }
 
.scale:hover .dont-scale {
    -webkit-transform : scale(1.0);
}

＆＃13;

<div class="scale">
    <div class="dont-scale">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>    
    </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

.scale:hover .dont-scale {}在.scale:hover {}后运行，因此scale（1）Measure而不是scale（2），因此child将缩放相同的父级。

试试这个：

.scale:hover .dont-scale{
    -webkit-transform : scale(0.5);
    transform : scale(0.5);
} 

  

避免利润问题：

.dont-scale{
   -webkit-transform-origin : top left;
   -webkit-transition: transform 0.3s linear;
}

＆＃13;

＆＃13;

.scale {
  max-width : 200px;
  height : 200px;
  background-color : beige;
  -webkit-transition: transform 0.3s linear;
  -webkit-transform-origin : top left;
  transition: transform 0.3s linear;
  transform-origin : top left;
}

.dont-scale{
  -webkit-transform-origin : top left;
  -webkit-transition: transform 0.3s linear;
  transform-origin : top left;
  transition: transform 0.3s linear;
}

.scale:hover {
  -webkit-transform : scale(2.0);
  -webkit-transition: transform 0.3s linear;
  transform : scale(2.0);
  transition: transform 0.3s linear;
 }
 
.scale:hover .dont-scale{
  -webkit-transform : scale(0.5);
  transform : scale(0.5);
}    

＆＃13;

<div class="scale">
  <div class="dont-scale">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>    
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

所有浏览器解决方案的输出干净（不模糊）

输出更整洁的另一种可能的解决方案是，将元素放置在必须缩放的父元素之外。

之后，将子div设置为相对。现在，将最大值设置为0减去父级的高度，然后将其设置为0。

这样，它不会受到影响，子元素也不会变得模糊。对我来说，这种解决方案效果很好。

.scale {
  max-width: 200px;
  height: 200px;
  background-color: beige;
  transition: transform 0.3s linear;
  transform-origin: top left;
}

.dont-scale {
  pointer-events: none;
  position: relative;
  top: -200px;
  left: 0px;
}

.scale:hover {
  transform: scale(2.0);
  transition: transform 0.3s linear;
}

<div class="scale">
</div>
<div class="dont-scale">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

结论

我认为没有其他解决方案可以得到干净的输出，因为缩放总是会影响子元素，但是您可以执行此解决方法。

在此处了解有关此问题的更多信息：CSS Transform scale, don't scale child element