缩放父元素但移除子元素的缩放答案

【问题标题】：Scale parent element but remove scaling on child elements缩放父元素但移除子元素的缩放
【发布时间】：2017-06-19 03:24:57
【问题描述】：

我目前正在使用 scale 制作一些 CSS 动画。有没有办法限制子元素不缩放，只有父元素会缩放。

.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);
}

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

</div>

【问题讨论】：

CSS Transform scale, don't scale child element的可能重复
为什么要使用前缀？ Transition & 2D Transform 对跨浏览器有很好的支持。在这种情况下不需要前缀。

标签： html css

【解决方案1】：

.scale:hover .dont-scale {} 在.scale:hover {} 之后运行，所以 scale(1) 比 scale(2) 测量，因此子级将被缩放到同一个父级。

试试这个：

.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;
}

.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);
}

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

【讨论】：

我之前尝试过，但它似乎有一些假想的边距。看看我的小提琴jsfiddle.net/clestcruz/Lg32f3sa
为了避免边距问题，添加这个 css, .dont-scale{ -webkit-transform-origin : top left;-webkit-transition: transform 0.3s linear;}
@ShyamBabuKushwaha，谢谢。