我目前正在使用 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>
最佳答案
.scale:hover .dont-scale {}
run after.scale:hover {}
,so scale(1) Measure than scale(2) ,for this reason child will be scaled same parent.
试试这个:
.scale:hover .dont-scale{
-webkit-transform : scale(0.5);
transform : scale(0.5);
}
To avoid margins issue:
.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>
关于html - 缩放父元素但移除子元素的缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44621829/