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

Question

我正在使用一些css动画scale.有没有办法限制子元素不按比例缩放,只有父元素才会缩放.

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

Answer 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: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;
}